The final times might change.
The ReactNext Tour
A Deep Dive into React-Redux
Redux and React are frequently used together, and many people are familiar with the "Provider" and
"connect" APIs from React-Redux. But how does React-Redux work, and why do we even need it in the
Join Redux maintainer Mark Erikson on a journey through the history and internals of React-Redux. We'll dig into:
- How a UI layer interacts with the Redux store
- The design goals that shaped the React-Redux API
- How the React-Redux implementation has changed over time
- What the future holds for React-Redux
Beyond Static: Dynamic Web Applications with Gatsby
For most of us, “static sites” only work for simple sites, like personal blogs. But static sites can do so much more! In this talk, learn how Gatsby uses React and GraphQL to help you build apps that combine the performance and workflow benefits of static sites with the flexibility and power of server-driven sites, all in a modern dev stack!
Ready for Concurrent Mode?
Curious about React’s upcoming “Concurrent Mode”? Hear the story of early experiments with this new React feature at Facebook, and gain deeper understanding of how it works.
Modern React - The Essentials
What are the essentials that every React developer needs to know today in order to keep up with the
React has come a long way since its early days. New features are constantly added, and with them code
We will review some of the must-know features (portals, Suspense, hooks), introduce their rationale and use cases, and understand where they fit in our problem-solving arsenal as developers.
Stick 'em with the functional end: How to use Functional Programming in your React app
Netta Bondy + Dafna Rosenblum
In the past few years, the buzz around functional programming has been growing, but it can be challenging to apply theoretical concepts to everyday work.
How can we make the code we work on more functional? What advanced patterns can you use, and why should you do that? And what do React hooks have to do with all this? In this talk we’ll have a look at real-life examples and patterns you can use to make React apps more functional.
I’m With Web Components and Web Components Are With Me
libraries and the new HTML5 standard, today it is much easier to create web apps.
Formal Forms with State Machines
Developing forms can quickly become complex, and the myriad of approaches and libraries only highlights the problem - there's so many different use-cases and no one-size-fits-all solution. It's time to formally model our forms. In this talk, we'll explore the current React form landscape and learn how hooks and state machines can be used to create abstract models of complex forms that greatly reduce dependencies on restrictive form libraries or complex custom components. With these abstract models, form logic can be automatically tested, simulated, analyzed, and visualized.
Cross-Platform React – from Web to Mobile
Sharing code between web and native applications helps deliver consistent apps in an efficient way.
Bringing code from web to native, our team manages to ship new features faster than ever before. Yet
code reuse brings its own issues as well, and might not be the ideal solution for everyone.
We’ll look at options of writing cross-platform apps and see how to leverage React’s clever rendering strategies to build apps as effortlessly as possible.
Handle All Async Events in Redux-Sagas: Let’s Catch Some Bluetooth Signals
Redux-sagas became a pretty common tool to handle asynchronous actions in the react-redux ecosystem.
However, often I saw that not all asynchronous events are handled with it although redux-sagas have
event channels which allow you to listen and react to any asynchronous routine (e.g. socket
connections or external signals) and not just redux actions.
Expect some live coding in this talk: We will implement a redux-saga event channel to catch signals of bluetooth beacons (why on earth do I try a hardware live demo!). Besides, this talk want to strengthen your understanding of generator functions (the backbone of redux-sagas). To this end, we will dive into a naive implementation of async-await to understand generator functions, and as a result, redux-sagas better.
React Native - Under the Bridge
Even if you are familiar with React Native, do you really know how it works?
Did you know about the bridge which is the secret sauce of React Native and makes it work on every platform and gives you the option to create a Native-Like apps?
In my talk,I am going to reveal that there is no magic in React Native.
There is a real smart mechanism that lets the JS code communicate with the Native code.
A major part of this mechanism is The Bridge which is written in C++ (wait..what??) and mapping between all you app modules and even lets you create custom ones of your own!
In Addition I will talk about its new architecture.
If you are a curious React developer who believes that knowing the internals of a library makes you a better developer, join me to the journey Under The Bridge.
State Management in a World of Hooks
Adam Klein + Maayan Glikser
React hooks shook the foundation of our React code, and how we think about state management. The long
debated Redux vs. MobX theme has shifted to whether context + useReducer is an alternative, and
whether state management is necessary at all.
In this talk we will explore how we can use the benefits of hooks in state management, such as separation of concerns, declarative side effects, and simple code reuse.
Managing Animations (Sanely) in (Insanely) Complex Apps
So you’re done writing the core of your app. It got pretty hairy but you pulled through. You
abstracted the business logic, broke down everything into components and mastered the flow of your app
state. Good job! Go get yourself a victory cookie.
Oh wait, you can’t, because a legion of designers and motion artists are headed your way chanting something about “storyboards” and “microinteractions”. How will that even fit in with your beautiful architecture?
Unlike state changes which can be instantaneous, animations inherently take time to complete - and that’s a big problem. In this talk we'll learn how to orchestrate animations across multiple components with complex state, and how this theory is implemented in React Animation Orchestrator.
React in Photoshop – The Untold Story
What if I tell you that every time that you run Photoshop, there’s a Node server spinning in the
background? How would you feel if I’ll show you how to extend Photoshop - the photo editing industry
If you are passionate about Photography and code - I got something to show you.
Build an AI-Driven Chatbot
Chatbots introduce a whole new way for users to interact with your websites. A good chatbot can save your users from long and complicated forms, cut down on support requests, and make your services more approachable.
If you've ever wondered how do build a chatbot, then this session is for you. You will:
- Dive into the core concepts of what makes a chatbot.
- Learn how to employ Machine Learning and Natural Language Processing to create a conversation flow that feels 100% natural.
- Look at a variety of possible conversations and challenges that go with them.
But more importantly, you will learn how to build a fully functioning chatbot and add it to your React app in less than 15 minutes—all without a single IF statement.
The Anatomy of a Click
What actually happens when you click your mouse in your browser window?
In this talk you'll take a deep dive into how your web browser works and what actually happens when a mouse is clicked. You will also take a deep dive into what browsers do, how events work internally and why.
Benjamin will go through how web automation tools like Puppeteer and Selenium simulate user actions, when that goes wrong and why.
Ideally at the end of the talk you will have a much deeper understanding of how browsers dispatch events and could utilize that knowledge to write better front-end code.
Technical SEO 101 for React Developers
In this session we will walk start with a typical React app and see what we can do to make it shine in search engines. We will discuss what technical SEO means and how it looks like for React apps. We will learn about Googlebot, web app architectures, testing tools and common challenges and their solutions.
Reconciliation: The Root of Performant Applications
DOM Reconciliation is the process of making the rendered page match the React component tree. Reusing
elements is important for performance, and many of the best practices for building React apps emerge
from the reconciliation process. Let’s break things to figure out how they work.
In this talk we’ll look at an app that does everything wrong. As we fix the problems, we’ll see how React is able reuse more DOM nodes and reconcile the component tree and the DOM faster, recreating fewer nodes. By the end we’ll have a model for reconciliation that will give us a solid foundation for remembering best practices and building performant applications.
Build React Apps Fast Using Storybook, DDD, and Atomic Design
Building large scale apps in the last years, lead me to a development process that provides rapid results and ability to scale.
I want to show these technics, building a real world react app, using storybook, with DDD (design-driven development) and atomic design.
Building an app is a complicated task. It starts with the flow from the product moving to design and then to the RND. However, it does not stop there, there is a need to go back and forth with the process as specs and design might change. Using DDD, we can leverage the ability to describe the spec visually, for the product and other stakeholders.
Using atomic design, we can create our MVP fast and ready for scale. Oppose to design systems, Atomic design gives us the granularity we need, and a way to compose our app parts very fast and stable.
Break + Gather in main hall
Micro-frontends: Is it a Silver Bullet?
Web Delivery Experience for React Native and Even Better!
Elad Bezalel + Elad Aviv
Closing Words + Quiz
Prizes & Raffle Winners