How to slow down React

React’s responsibility is to keep the UI updated with application state and to do it fast.
To accomplish this task, it uses various techniques and algorithms that work well – until they don’t. And when they don’t it can hurt the performance of our application and hurt the user experience.
In this talk we will learn how React does it’s magic and what are its three weak spots, so we can hopefully avoid them in our applications.

Speaker bio:

I Have been building web apps for 15 years, always striving to make them better, faster, stronger

Star Wipe! Native-like Animations with React-Router

React-router lets your app respond to the browser history with ease.
However, pages suddenly appearing can look a bit dated, especially when compared to the swish animations that have become the norm in native iOS and Android applications.
This talk takes a look at how to achieve native-like transitions on the web, still using react-router, and without making your codebase unreadable.

Speaker bio:

Stephen works as a Front-End Engineer at Thread, having previously worked at Amazon Video and Onfido. He works mostly with React, collaborating closely with the design team to deliver a smooth end-user experience. Otherwise Stephen focuses on his long-term ambition of being paid professionally for playing Mario Kart.

Testing in Production

By testing in production, you will have increased accuracy of test results, your tests will run faster due to elimination of mock and bad data, and you will have higher confidence before releases. You can accomplish this through feature flagging, continuous delivery, and data cleanup. Only when your end-to-end tests pass in production will you know that your features are truly working. I will show you how to mitigate risk, improve your understanding of the steps to get there, and shift your company’s testing culture to provide the best possible experience to your users. I will talk about the way to run tests in the production environment of a system, how to do it without disrupting real end users, and how to exclude testing data from data and analytics. I will also talk about the tools that help in this process, the benefits of testing in production and why the pros outweigh the cons, over doing it in staging or other testing environments, why its more reliable, and sometimes even easier.

Speaker bio

Talia Nassi is an international keynote speaker who delivers content on all things testing and quality. She is a developer advocate at Split.io where she works closely with engineering teams globally to ship software more efficiently. She is passionate about feature flagging, canary launches, CI/CD, testing in production, and A/B testing. She has spoken at countless conferences internationally, ranging from audiences of 100 to 2000!

Behind the Magic Curtain: JSDOM In Depth

JSDOM is the magic behind much of modern frontend testing tools. Many developers are using it, without even realizing that they are, when they use Jest to run frontend code.

JSDOM is a library that emulates the browser DOM, for certain, but how does it work? What can it be used for? What are its limitations? It’s time we dug deeper into a library that is today the cornerstone of our frontend testing. Learn how to use it to mock HTTP calls, learn how to use it even with CSS Modules, CSS in JS, and other webpack shenanigans. Even learn how to take screenshots, even when there is no browser around!

Speaker bio:

From the olden days of DOS, to the contemporary world of Software Testing, Gil was, is, and always will be, a software developer. He has in the past co-founded WebCollage, survived the bubble collapse of 2000, and worked on various big cloudy projects at Wix.

His current passion is figuring out how to test software, a passion which he has turned into his main job as Evangelist and Senior Architect at Applitools. He has religiously tested all his software, from the early days as a junior software developer to the current days at Applitools, where he develops tests for software that tests software, which is almost one meta layer too many for him.

Do The Evolution(ary Architecture)

Now that React has been around for a while, there are some pretty big, pretty old applications out there! Hopefully you’ve kept up your apps up to date with the latest versions of React and the freshest APIs, but chances are there’s a few cobwebs 🕸 on some parts of your codebase that you cringe at when you come across them…

This is a totally normal part of the natural growth of an application. But how can we tackle those smells and correct past mistakes without massively blowing out the scope?

Let’s discuss a novel approach to dealing with mature codebases! We will take some ideas from genetic algorithms and micro-service architectures, and combine them with code analysis and snapshot testing, and introduce a pragmatic, *evolutionary* approach to codebase health and maintenance.

Speaker bio:

Craig is a Software Engineer from New Zealand, working at Spotify in Stockholm. He loves building cool things that help teams build cool things! He also loves punk rock, Disney’s Frozen, and his cat Cosy.

Universal Dependency Injection

Using React Context adds non-UI clutter to your view hierarchy. Discover why Dependency Injection is so important for applications development and testing. See how easy it is to use a ‘universal’ DI library to dramatically simplify your React applications.

Speaker bio:

Thomas is a Solutions Architect for Web & Enterprise products using React and Angular. He provides mentoring, leadership and technical guidance, architecture and technical debt-reduction solutions for enterprise teams. He is passionate about React, Reactive programming, Architectures, RxJS, and animations.

Rethinking Forms in React

Now that we have React Hooks, you can throw away your form libraries, right? Well, not exactly. Managing form state is more than just holding your current values in state; it’s about sync and async validation errors, and much more!

Nor are render props dead! In fact, if you want to create extremely performant forms in React, render props are your friend, as they allow you to control exactly which parts of your form are rerendered as the user types.

We’ll explore, mostly through live coding, how to build robust and performant forms in React using a model such as React Final Form’s observer-based model to finely control which parts of your form need to be redrawn on every keypress, reducing your precious development time and developing great modern form UI that’s a pleasure – well, let’s not go too far…how about “not an immense pain”? – for your users.

Speaker bio:

American expat javascript dev in Spain, author of Redux Form and React Final Form

Intro to scrollytelling

Interested in scrollytelling? You know, those web pages that animate as you scroll like the New York Times’ [Snow Fall piece](https://nyti.ms/2QoUIiR), or this [visual introduction to machine learning](https://bit.ly/35rNHlE). Interactive articles are increasingly common among online publications, and often end up being their most popular (and enjoyable!) pieces.

It turns out, you only need a few tools to make powerful, interactive scrollytelling pieces! In this talk, I’ll introduce you to a few of those tools—Lottie, Scrollama, and native CSS—and show you how to use them with React. I’ll walk through the process of creating a demo storytelling piece; and by the end, you’ll know how to:

1) trigger animations when the user scrolls to a certain point on the page.
2) create scrollbound animations that move with the scrollbar.
3) render After Effects animations directly on the web.

You’ll leave with a list of inspiring examples and resources to build a scrollytelling piece of your own!

Speaker bio:

Making things with code. Learning how to human better. he/him

React Native VS Flutter – The Cold War Between Facebook and Google

Since 2015, React Native was one of the strongest players from the cross-platform frameworks.
Most of the developers and companies who wanted to create an app for iOS and Android worked with this amazing library (UberEats, Instagram, Walmart..)
But, apparently, not everyone was fully happy with its developer experience such as the integration with external open-source libraries and some more developer experience issues.

Almost two years ago a new lady came to town – Flutter.
It was created by Google to develop mobile apps for iOS and Android using dart coding language. Google decided to join the war of being the best cross-platform framework.
It surprised some of the mobile developers by its fast on-boarding and developer experience.
It even made some of the developers that chose to use RN to have a second thought about it and some of them even switched sides.

It seems like a cold war between the two which is happening quietly behind the scenes and might blow up one day and one of them will beat the other one.
Some even say the competition between them helps them both to overcome the Native market itself and compare performance and developer experience.

In my talk, I am going to tell you a story between two giants who want to win the cross-platforms frameworks market.
We will see the timeline and “weapons” each company used since 2015 to appeal more than the other one and decide together who has more potential to be the winner.

Speaker bio:

I am a software developer for more than 12 years and currently a Frontend Architect and a Freelance Developer , who worked in the last year with more than 10 clients using ReactJS and React Native (including moving a huge company from Israel from Angular to React).
In the last year I created and currently hosting one of the best podcasts for programmers in Israel and created until now 50+ episodes (React, Node.js, Deep Learning, Flutter and many more).
I really enjoy giving lectures to other people and to make complex technical subjects accessible for hearing and learning. I especially LOVE the ‘aha moment’ that people have.

CSS in JS – The good, the bad, the ugly

The rise of modern JS frameworks brought in more efficient concept of Front End programming. These inspired new approaches, such as CSS Module and CSS-in-JS, more scoped in working with CSS.
It’s always a debate which is the best practice among these approaches. Some claimed CSS-in-JS eliminates developer’s most fear when dealing with CSS (the CSS file) with more dynamic approach. Some disagreed. If you are keen to know about CSS-in-JS and what should be considered when it comes to work with CSS, this talk is for you.

Speaker bio:

Maya is a Frontend Developer @Cloudinary and open source maintainer of m16y – Media Accessibility project and StoreFront UI framework. In addition she is also a writer on Ultimate Courses and Frontend Weekly, where she mainly writes articles about JavaScript tutorials and good practices. She has been developing web apps with Angular, VueJS and recently ReactJS. She loves to learn and experiment with new framework, while believing that a strong Vanilla JavaScript knowledge is necessary for being a good web developer. When not coding, she enjoys traveling, reading manga, and sketching.

Welcome to the (Virtual) World of React 360

We all love React and use it to create awesome web application, and something even native apps with ReactNative. But can it do more?
React 360 creates exciting 360 and VR experiences using React. With React 360 we can deploy our creation across the web to desktop, mobile, and VR devices.
In my talk I’ll show how we can use React 360 library to creat a webVR game and do a live coding session.

Speaker bio:

Senior Software Engineer at AppsFlyer. Have a M.Sc. in computer science. Co-organizer of the IoT Makers Israel meetups and a co-manager of Baot “Clean Code” program.

Micro-scopes – Build a modern, modular React App in a bundled world

In this talk we will explore the great benefits of breaking a big React app to meaningful, independent pieces – each can be built, deployed and loaded separately. We will discuss best practices and gotchas when trying to apply this microservice-like pattern to the chaotic world of the browser, and how to integrate modern React pieces into an existing, legacy code, while sharing dependencies. We’ll witness how building the right pieces guarantees a brighter future for your apps.
By debating about the correct structure of our front-end, the way to break it into pieces, and how those pieces communicate and render within each other – some very valuable insights and practices come together.
Let’s dive into Neverendering story of modern front-end architecture.

Speaker bio:

Liad is the Frontend Architect and Tech Lead in Duda, in charge of its client-side infrastructure, technologies, and performance.
He is a web dev enthusiast for over a decade, juggling React, Webpack and Buzzwords@latest in order to always build the best user experience.

Making React Applications Work for Everyone

React has quickly become one of the most popular front-end libraries for creating web applications. But how much do we know about how well these interfaces work for *all* of our users, including those with disabilities or impairments?

In this session I will discuss how React provides a basic foundation for accessible user interfaces as well as how to go beyond the out-of-the-box features to build more inclusive web apps. I’ll cover common obstacles in designing and building accessible apps, helpful tools for testing, and share my own experience auditing an existing react app.

Speaker bio:

Yuraima Estevez is a software engineer at The New York Times. She cares deeply about building open source tools, empathetic web design and development, and finding the best tacos in whatever city she happens to be.