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

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

ReactNext

The main premise of modern reactive applications is that they provide high-performance out of the box, making the user experience feel blazingly fast. Yet, there’s a limit to the magic that even React can pull off. There are times we need to help it, and often we might actually hurt the performance of our applications.

In this talk I will do a live demo of investigating and resolving performance issues such as how immutable state' can actually adversely affect performance or how inefficient selectors can lead to components unnecessarily re-rendering. Using the Chrome Dev Tools and other profiling tools provided by React itself, we will discover how to find what's causing slowdowns. Then we'll go through the best practices needed to make our app blazing fast again.

React Responsively, Render Responsibly

React! Babel! Angular! Ember! Meteor! Jest! All these beasts and more swear by the magic of the monorepo - a secret sauce all these impactful projects share. You’re intrigued, but you have questions. 

What is a monorepo? What does it offer my React projects? How would I even get to having a monorepo? Will my hipster cred be incredible if I get one?

Join me in answering these questions, highlighting both the joys and the tricky parts of the turning monorepo mythos into pragmatic reality.

MonoRepos for the Masses

There’s magic in every new beginning – building a new web app on a green field is every developer’s dream. A dream that can turn into a nightmare as the codebase grows, matures and finally becomes unmanageable. 

React is based on the concept of components. The idea is to compose your application of independent building blocks that you can easily reuse or replace with better ones. If you embrace this idea, you can keep your platform tidy and maintainable. If you don’t – well, you can write React spaghetti code just as easily as you can write jQuery spaghetti code. 

Patrick talks about his team’s constant effort to “componentize all the things”, to find best practices, strategies and patterns to constantly improve the code base. You’ll take away hands-on advice from real-world experience, to help you make your own code a little better every day, too!

Breaking Down Your Web App

The open-source React community has produced some amazing 3rd-party libraries that make React development as powerful as it is. But what does it take to create a "beautiful abstraction", a library that hides a lot of complexity into a simple API? To answer this, I took a journey into the source code of 18 different React libraries, including of course the "big ones" like Redux, React Router, etc.

In this talk we'll examine the patterns that these libraries share, and how you can apply them your own React Components

link to the slides:
https://noti.st/cowchimp/begO8Y/beautiful-abstractions-what-i-learned-reading-the-source-code-of-18-react-libraries

Lessons Learned Reading the Source-Code of 18 React Libraries

In the past few years, React and Redux have generated a surge of Functional and Declarative Programming which we often take for granted. However many of us never got a chance to learn the fundamentals.

In this talk, we’ll discuss the fundamentals of Functional Programming and how they apply to modern JavaScript. We’ll cover immutability, separation of concerns, and composability. We’ll avoid unnecessary jargon like monads and functors and stick to concepts that will make our code better.

Functional Programming Fundamentals

Immer is a tiny package that allows you to work with immutable data structures with unprecedented ease. It doesn't require learning new data structures or update APIs, but instead creates a temporarily shadow tree which can be modified using the standard JavaScript APIs. The shadow tree will be used to generate your next immutable state tree. This shadow tree is maintained using Proxies.

Proxies are an exotic javascript feature that is nowadays available in all modern browsers. What are they, how do they work and why should you (not) use them?

Join this talk to learn more about Proxies, or about how to deal with immutability data structures with a better DX as was ever possible so far. Brace yourself; your reducers will become twice as short without giving up on any of the semantic constraints.

Slides for the talk: (including source code of the demos): http://immer-react-next-2018.surge.sh

Immer, Immutability and the Wonderful World of Proxies

Storybook is a tool for developing UI components in isolation. And it's also for documentation and testing. 

I'd like to give you an overview of how to use storybook. But also I want to talk about what it's like maintaining a project like this. How did we go from 0 maintainers to 50+ and what were the lessons learned.

Building a Maintainable UI with Storybook

One of the first advanced React patterns we learn is to separate presentational, "dumb" components from state full and connected components called "containers". But it turns out there are a couple of other patterns that are useful when building larger react applications. 

This talk covers topics like how to inject services into your component tree, how to deal with different designs for different screen sizes when media queries just don't cut it, how to really keep presentation components clean and simple and where to put the complicated bits. It also touches on some of the dark arts of what's really possible with JSX.

Advanced Patterns - Moving Beyond Presentation and Container Components

It’s always fun to blame react native for everything that is wrong in our lives. However, what we keep finding, again and again, is that for most of the cases. Writing better performant react code can fix our performance issues. In the last couple of years our team built a huge production app in react native.

In this talk I’ll go over some of our lessons learned in regards of react native performance and how to improve your app’s performance subsequently.

(Don't) Blame it on React Native

TypeScript is JavaScript super set language that adds more capabilities to JavaScript and of course static typing.

In this short lighting talk we will have a practical demo to show you how to wire TypeScript language into your React app and Webpack build.

Wiring TypeScript into React

React and React Native allow for building truly amazing apps. As great as they are, having multiple teams working on a single, shared codebase is still a difficult task. It forces you to deal with issues such as accumulating tech debt, code ownership, and generally keeping everyone from stepping on each other’s toes.

The world of backend development has already moved from monolithing, single-process deployments to using microservices as the go-to architecture for development at scale.

In this session we will explore microservices design patterns, and learn how you can apply them to a React app, in order to scale the development of the app to multiple teams.

Applying Microservices Design Patterns to Scale React App Development

Many of us have products that have been here for a while and are written in older frameworks. Eventually we have to upgrade for various reasons but a full rewrite is a big risk for the company. 

In this talk we'll learn how to gradually migrate from angularjs to react without hurting the business bottom line. Share data and build hybrid features which are powered both by react and angularjs. Until the final day where we can delete our old code and have a brand new application.

Migrating from Angular to React

React has exploded in popularity. But it’s only a UI library, not a full-fledged framework like Angular, Ember or [insert latest JS framework]. We need to create our own “framework” by picking from the plethora of libraries in the React ecosystem. But which ones should we choose? Or better yet, which ones do we actually need? Do we need a Redux? What about handling styling, testing and routing, etc? How does it all come together?!!?!

Let’s walk through the tools and helper libraries that surround React. By the end of the session, you’ll have a solid understanding of the ecosystem and know which libraries you should prioritize learning first in order to confidently build your own React-based stack.

State of the React Ecosystem

"Redux forces you to write good code" - I've heard that sentence many times.
In fact - it's quite easy to write bad code with Redux, as I will demonstrate in this talk.

In this talk I will show some bad practices and techniques with Redux, and how to avoid them.
We will cover aspects such as code reuse, coding conventions, and architecture

How to Write Bad Code in Redux

React Native is a great way to build native apps for iOS, Android and other mobile platforms. In this talk, we will look at the internals of React Native, and how code written in JavaScript can power a fully native mobile application. We will look at the various parts of the system like the bridge, the UI manager and the plugins. We will also touch upon the rendering process and compare it to React's rendering on the web. We will look at some of the new and exciting improvements powered by Fiber, and talk about the the interesting experiments and upcoming features.

This talk stems from my experiences as a web-developer newbie on the React Native team, and is an attempt to document my journey in comprehending the code base. At the end of the talk, the attendees will not only be able to build React Native apps, but also understands how it all works together.

Building React Native

As client side applications are growing richer with interactivity, motion is entering the conversation as a critical part of user experience. With all the languages, tools, and APIs available, such as CSS Transitions/Animations, GSAP, and React Transition Group, how do you decide to choose one over the other?

This talk will be a comparison of several approaches to implementing motion in React, from using CSS-in-JS tools like Styled Components, as well as animating components with vanilla JS, functional libraries, or libraries more closely tied to the ecosystem like React Motion.

ReactNext 2018

Nov 4 | Tel Aviv, Israel