ReactNext is an one-day community-driven event packed with advanced lectures by internationally renowned speakers, and networking opportunities with over 750 attendees from all around the world, that share a passion for React. 

ReactNext targets both beginner and experienced devs in two parallel tracks with sessions about React, React Native, Redux, MobX, and everything about the ecosystem.

ReactNext

React Next 2019 Highlights

Web development changed dramatically during the last years. With the enormous amount of JavaScript libraries and the new HTML5 standard, today it is much easier to create web apps. 

When building a web app, you will probably want to reuse some of the web components you built. But how can you do that with the current state of HTML? One of the new and emerging web standards is Web Components. The Web Components standard enables you to create reusable web components that include HTML, CSS and JavaScript. Can we use Web Components with React or vise versa? This session will answer this question and explain the why and how to do such a thing.

I’m With Web Components and Web Components Are With Me

Repo:
https://github.com/reusablejs/reusable

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.

State Management in a World of Hooks

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.

Build React Apps Fast Using Storybook, DDD, and Atomic Design

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.

Handle All Async Events in Redux-Sagas

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.

Anna is a javascript developer who loves working with new technologies. Currently working at Hive, she does full-stack development to deliver a great end to end solution focused on user experience.

Cross-Platform React – from Web to Mobile

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.

The Anatomy of a Click

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.

How to use Functional Programming in your React app

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.

Formal Forms with State Machines

You noticed a button in your app is in the wrong color. You fix it and merge the code to your production branch. Congratulations! now it’s time for your code to meet your users. In a mobile app that means you just entered a few days (at least) of a build-test-fix cycle, and if that’s not enough you now have to wait for the store review of your new version. That means you wait for a week, if everything went smoothly, just for a small UI fix. That’s the nightmare of CI/CD on mobile apps. 

In Soluto we developed Dynamico. An OTA javascript code delivery framework that allows you to load React components dynamically. Come and learn how you can start using it to safely move faster!

https://github.com/Soluto/dynamico

Web Delivery Experience for React Native

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.

Ready for Concurrent Mode?

What are the essentials that every React developer needs to know today in order to keep up with the times? React has come a long way since its early days. New features are constantly added, and with them code patterns emerge. 

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.

Modern React - The Essentials

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.

Reconciliation: The Root of Performant Applications

Micro-frontends - is it just a hyped out buzzword or do they live up to their promise? This talk will cover how we made the migration to micro-frontends following challenges we encountered. And will give a brief overview of some of the answers to the ultimate question, are micro-frontends worth the hype?

Micro-frontends: Is it a Silver Bullet?

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.

Build an AI-Driven Chatbot

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.

Technical SEO 101 for React Developers

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 first place? 

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

A Deep Dive into React-Redux

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.

Managing Animations (Sanely) in (Insanely) Complex Apps

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!

Beyond Static: Dynamic Web Applications with Gatsby

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.

ReactNext 2019

Jun 11 | Tel Aviv, Israel