ReactNext

The only constant we can could on in tech is that nothing ever stays still. This is a truth in tech and especially true in web development. React is no different. It’s getting faster, easier, and more reusable. 

In this talk, we’ll be taking a look at the new features of React and what you need to know for working with React 16. It’s a whirlwind topic with a lot of useful information about riding on React along it’s next iteration. Buzzwords: async rendering, error boundaries, fibers.

What's New in React?

React and TypeScript are cool technologies that gained a lot of traction and love from web developers. TypeScript is a typed superset of JavaScript that compiles to clean, simple JavaScript code and enables developers to be more productive with better tools, intellisense and static checking. React lets you write JavaScript all through your app. It only makes sense to combine the two. 

In this talk I’ll go over the benefits of using TypeScript and how to introduce it to your React project, while reviewing common cases.

Level Up Your React With TypeScript⁠⁠⁠⁠

The success of React also helped to leverage webpack. It’s the tool of choice for React developers. In this talk I will go through a variety of ideas and techniques that will help you get more out of webpack.

Webpack – The React Parts

Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.

Universal React Apps Using Next.js

Come and see some amazing things that can be done with Redux middleware and open source tools to make your Redux project shine. NOTE: This is an advanced talk for developers with practical experience using React & Redux.

The code for the lecture: https://github.com/500tech/middleware-lecture

Practical Advanced Redux

React and its component model is nowadays the most appealing abstraction to declaratively describe user interfaces. The core concepts are so powerful that we can apply them outside the DOM, like in React-VR, Sound manipulation, games etc. 

In this talk I will demonstrate that all the core ideas powering React are so powerful that we can even translate them to a completely different field: state management. MobX-state-tree applies these very same concepts to make data management declarative, elegant and easy to reason about.

React, But For Data

New project starts. Everyone is excited. GraphQL is on the stack. Yay! Life is good! Suddenly someone pops the question. So which GraphQL Client should we use? What do you mean? Oh, nooo! 🙂 Don’t worry I’ve got your back. 

In this talk I am going to put these two under the microscope and find out what are they best at, what features they share and, most importantly, what are their key differences! You can relax.

Relay Modern or Apollo?

Gatsby is a modern JavaScript web framework that let’s you build the fastest websites in the world. It combines the fast performance of static websites, modern browser capabilities like and service workers, and the powerful abstractions, excellent tools, and client capabilities of the webapp world. 

It is a general purpose data-centric web framework that is successfully being used for a wide variety of sites including blogs, marketing sites, documentation sites, and ecommerce. 

Come listen to why you should build your next website with Gatsby.

GatsbyJS — How to Create The Fastest Sites In The World

Have you ever struggled with making dependencies between reducers? Have you ever stepped into problem with mulitple async operations done at the same time doing huge mess in your state? Let me be your guide into redux sagas with tips, how and when you can use them in your application to solve all side effects problems at once.

Handling Side Effects in Redux With Redux-Saga

React Native framework is a popular solution nowadays of creating real Native apps with React. But what are it’s limits? In this talk I will cover things you probably haven’t thought about creating in React Native. We will see how Native code can be easily bridged into JavaScript world to create stunning visuals, connecting to wearables and much more.

Things You Didn't Know You Can Do With React Native

React ushered in the era of JSX, bringing HTML to our JavaScript. Now that same community is doing the same for CSS. How’d we get here? What problems are the community trying to solve? Do we hate CSS? Get the perspective of someone who has spent more time than is healthy with existing CSS-In-JS solutions.

Get That CSS Out Of My JavaScript

Let's face it, the code we write very rarely resembles the code we send over the wire. Modern web applications are already built with ES6/ES7+, type annotations, JSX, and other language extensions. We treat JavaScript more like a target language: something we compile to, not something we write. If we’re going to treat JavaScript as a compilation target, we should start thinking critically about what we really want in a source language. In this talk, I’m going to try to convince you, through critical ReasonML’ing, that OCaml + ReasonML is one of the most attractive, up-and-coming options to fill this role.

Critical ReasonML'ing

In this talk, we will see how fun and productive it is to write a React application using ClojureScript. ClojureScript is a pragmatic functional LISP-based language for the browser. It embraces immutability and provides the fastest wrappers for React like reagent and om. I will show the basics of the language and show how well it integrates with React. This talk will feature lots of live coding demo.

React on Steroids with ClojureScript

This talk will explore and help us understand how we can elevate your apps with a Service Worker and explore various options of data management when you are offline including redux-offline, pouchdb, a simple IndexedDB. It will also look into how can you wire your application such that heavy offline data can be seamlessly sync-ed once the user gets online and few approaches of how to manage the behaviour of your APIs to help you with this aspect.

Dealing with Data Offline in Web Apps

Wouldn’t it be awesome if you could write a React component once and render it in web, native, and even VR applications without changing a single line of code? Thanks to several libraries that bring React Native’s primitives and APIs to the web, now you can! This talk will introduce three libraries that allow you to develop cross-platform components: React Native Web, React Primitives, and ReactXP. You’ll also learn how to architect your shared component base to achieve maximum reuse across platforms.

Write Once, Render Anywhere

D3 and React, who should control the DOM? After all, React’s whole purpose is managing updates to the DOM so we don’t have to. D3, on the other hand, is a library for building data visualizations, and it too needs access to the DOM. And stepping back, when should we even use D3 and React together? In this talk, I will give guidelines on when React should have ownership of the DOM, and when D3 should instead. More importantly, I will cover the interactions and applications that will benefit the most from using D3 and React, together.

D3 and React, Together

A great strength of React Native is how easily we can interface our app with native code. In this talk, I’m going to explain the lifecycle of a native module, how to call it, how to reuse screens and pages from an existing codebase or integrate React Native screens into an existing app.

Bridges to React Native

High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. The most difficult part of automated testing on mobile is the tip of the testing pyramid – E2E. The core problem with E2E tests is flakiness – tests are usually not deterministic. 

React Native makes flakiness worse due to the async nature of the bridge. We believe the only way to tackle flakiness head on is by moving from blackbox testing to graybox testing and that’s where detox comes into play. The library synchronizes with the lifecycle of the app, including React Native core, making tests finally deterministic.

Detox — Graybox E2E Tests Library for React Native

WebVR enables web developers to create frictionless, immersive experiences. We’ll explore the core concepts behind VR, see different demonstrations, learn how to get started with React VR and explore a new powerful approach for building VR experiences using React.

ReactNext 2017

Sep 10 | Tel Aviv, Israel