Make sure to get in early.

• Tooling (¹⁄₂ day)

  • Manipulating Child Components
  • Building a Wrapper Component
  • Building a Higher order component
  • Composing higher order components

• Advanced React Topics (¹⁄₂ day)

  • Setup Hot reloading
  • Speeding up hot reloading significantly with Webpack DLL
  • Codesplitting with Webpack & how to make it work with the React Router
  • Treeshaking with Webpack2 to reduce your load size

• React Native overview & architecture.
• “Hello world” with create-react-native-app.
• Tooling: packager, developer tools, debugging.
• ES6/7 highlights relevant to React Native (async/await, classes, property initializers, fetch).
• Core components, styling, flex box.
• Routing: react-navigation.

Intermediate level workshop: this workshop assumes basic knowledge on React (components, properties, event handlers, state) and project setup (bundling etc). We will work from create-react-app in the workshop.

In this workshop we will build a small application (but not too trivial) application from scratch. We start by modelling our state after the mental picture we have from the problem. After that we define the operations we want to perform on the state, and define which information we want to derive from the state. We will start small, and then discover that the very same principles apply to rendering our UI (using react), authentication, routing, testing, async processes. After this workshop you should have gathered enough knowledge to build real life applications based on MobX and the underlying reactive principles.

Topics:

• Introduction.
• Setup
• ES6 / ES.Next recap: arrow functions, classes, decorators, field initializers
• Introduction to MobX, why MobX for state management?
• MobX basics: observable, computed, autorun & action
• Modelling domain state: stores, models, actions
• Testing state & logic, JEST, snapshots
• Building reactive user interface: observer (+ testing)
• Recap: How does MobX track changes?
• Using Provider / inject to pass stores through deeply nested interfaces
• Fetching & storing data (+ testing)
• Routing & authentication
• Form validations
• Conclusion

Make sure to get in early.

Building a GraphQL Server /w Apollo (1 day)

• Setting up a schema
• Connecting to a datasource (microservice or datastore)
• Setting up Apollo
• Fetching data with static queries
• Fetching data with dynamic queries
• Writing data with mutations

• Core APIs: Persistence, StatusBar, Keyboard, AppState, NetInfo, BackAndroid.
• Animations: LayoutAnimation, Animated. Gestures: PanResponder and beyond. Native driver and threading implications.
• Current ecosystem: boilerplates, component libraries, and other libraries.
• Ejecting and installing and writing native modules.

CSS-in-JS is a powerful technique to help you make your react components portable and manage your css code more easily, it has been popularized by the react team and has been taking over the frontend world ever since. Sunil Pai is the author of Glamor (one of the top css-in-js library in use by next.js, gatsby and sourcegraph) and is really passionate about css-in-js. You will learn:

• what problems does css-in-js solve?
• comparison of different css-in-js libraries
• a deepdive into glamor
• different interfaces: jsxstyle, aphrodite, styled components
• server side / static side rendering
• composition strategies - theming, modularity, lazy loading, etc.
• write your own plugins
• autocomplete for styles with typescript/flow
• build your own css-in-js lib!

Make sure to get in early at 323bis Rue de Charenton, 75012 Paris https://goo.gl/maps/t4FKT93C25u

Your typical French breakfast with croissants, coffee and more.

A few words from our sponsors

Coming soon

Dominic will talk about what makes inferno’s so fast and how he and the team are bringing this experience to react.

Socialize, have some coffee or other drinks.

Jest was adopted widely across 100s of companies recently and provides an immersive testing experience. We’ll take a deeper look at JavaScript Testing with Jest and what it takes to turn a tool into a product with a delightful experience.

The new wave of frameworks won’t be frameworks at all.

In this talk, Sunil will explore how compilers and bundlers will replace certain runtime dependencies, without degrading the development experience that we all love and depend on. We’ll discover strategies of incorporating these ideas into any regular app, how we can leverage component models from react/vue/ember etc to enhance these ideas, and my own take on tooling in this framework-less world.

Lunch time! Socialize while eating at our delicious buffet.

Coming soon

There’s a big push to improve React’s perceived performance. And WebAssembly is fast. Could WebAssembly be part of the solution? In this talk, code cartoonist Lin Clark will look at what WebAssembly could mean for React’s performance, and how the new Fiber architecture makes that even more of a possibility.

Socialize, have some coffee or other drinks.

nc

Coming soon

Socialize, have some coffee or other drinks.

If only React Native apps could be highly extensible- such that a single experience within an app could be published and installed into other apps. If your screens are built with sufficient isolation, they can be portable between apps, platforms, and navigation implementations. In this talk, we will discuss how this ultimate modularity can be achieved simply by utilizing reducers and single-directional data flow. Then we will use React Navigation to quickly build a new experience with these techniques, and see how portable it really is.

React’s server-side rendering speeds up page load times, but it’s far from the only performance boost we can get on the server. In this talk, I’ll discuss how exploiting streaming and parallel processing on the server and browser can get us faster time to first byte, faster time to first paint, and faster time to full interactivity.

• ShoutemUI by the Shoutem team
• return null; by Joshua Comeau
• Thousand ways to navigate in React Native by Charles Mangwa
• Fancy Footwork: Building a Composable CMS for Aldo by Brendan Moore, Sarah Mogin and Serge Rose
• Detox — Graybox End-to-End Tests and Automation Library for React Native by Tal Kol
• Danielle Man - Devtools for GraphQL
• Serious graphics on React Native by James Ide

Drinks, food, socializing, music.

Make sure to get in early.

Your typical French breakfast with croissants, coffee and more.

Last years there have been great developments in state management libraries. Both Redux and MobX sprung from the React community and provide stand-alone, generic state management solutions. Both have gained big in popularity, and both have their own strengths and weaknesses. What can we learn from both approaches? Can we get the best of both worlds? Can we add a little Boabab and Cerebral to the mix? Is it possible to create a transparent reactive, snapshotable state container. With support for JSON patches, replayable actions, serialization, complex object graphs. With Redux & MobX compatibility, strong typing and runtime type checks out of the box. Get a glimpse of what next-gen state management might look like with mobx-state-tree. Largely designed by the MobX community and enforcing many best practices that have evolved over the last year.

Coming soon

Socialize, have some coffee or other drinks.

Twitter for Mobile Web is a complex PWA built with Node.js, React, Redux, Service Workers, and Webpack. This talk will cover how our team designs and builds one of the world’s most visited web apps. You’ll also hear about React Native for Web; how we approach network and render performance challenges; and how we use new web platform features.

• Expo Snack by Brent Vatne
• How to create a React Native reusable component for existing Android apps without knowing a thing about npm or node_modules by Petter Hesselberg
• Quantifying Best Practices by Jackson Hamburger and Louis Antonelli
• Leveraging code-splitting in React apps by Glenn Reyes
• Smarter code-splitting and preloading for React applications by Brandon Dail

Lunch time! Socialize while eating at our delicious buffet.

Authoring VR content is time consuming and technically challenging, I’ll be providing an overview of how we are using the core strengths, merits of React Native and building on it to drive and improve app development within Oculus. I’ll go into more detail about the runtimes of both the native Android version and WebVR versions and how we utilize the improved engineer workflow the technology gives us access to.

With the advent of libraries like React, Redux and Immutable.js, it’s clear that there’s a shift away from imperative and object-oriented in the front-end towards a more declarative and functional approach. Meanwhile, libraries like RxJS and Mobx are spreading the use of Reactive Programming to model UIs via discrete, asynchronous event streams. How can we combine the best of both functional and reactive paradigms to model and build predictable UIs that control themselves?

In this talk, Preethi will explain what “Functional Reactive Programming” is, how close React / Redux / Mobx / RxJs and others come in realizing Functional Reactive Programming, and what’s still fundamentally missing from these tools to achieve a true implementation of FRP. Lastly, she’ll describe when and why FRP is suitable (or not suitable) for building predictable and scalable UIs.

Socialize, have some coffee or other drinks.

nc

We are biologically trained to notice motion: evolutionarily speaking, our survival depends on it. For this reason, animation when done well can guide your users. It can aid and reinforce spatial maps of our interfaces, and give us a sense that we understand interactions more deeply. For this reason, animation is incredibly powerful to convey meaning, but only when done well.

But animating the virtual DOM comes with some intricacies that affect our implementations. In this talk, we’ll go over animating in React with a variety of methods, comparing and contrasting each. We’ll cover add-ons like ReactCSSTransitionGroup, using external libraries like GSAP, React-Motion, motion using RxJS, and transitioning state with D3. We’ll look inside some real systems, breaking down how we can create reusable components of animation principles for interchangeable yet cohesive patterns.

Socialize, have some coffee or other drinks.

React provides an abstraction between the description of a UI and the details of how it’s rendered on a given platform. The problem is that <div> and <span> are a hidden dependency on react-dom, and similarly, React Native’s <View> is an explicit dependency on Native, making both not quite as “cross-platform” as we want them to be. Learn how we as a community can get around these issues, and what we can unlock by doing so.

Animations can make your app more pleasing to use and help the user understand state changes. This talk will give best practices on when to use them and an introduction of how to implement them in React Native with a deep dive into a new strictly declarative approach similar to CSS animations and transitions.

With React, Redux, ImmutableJS and friends, frontend development strive towards the functional approach proving to yield increased readability and maintainability. However, working in JavaScript, we never truly commit to the paradigm, but what if we did? The Elm language goes fully functional and as suspected, it comes with an ocean of benefits!

This talk will go over our approach of incremental React Native adoption within an already established native app. We will discuss the various problems that arise from using React Native in such a “hybrid” app model and in particular, discuss inter-app navigation and embedding React Native views into native shells and vice-versa.

This is your opportunity to ask questions to the team.

Have a last drink before leaving.

Our official ReactEurope Hackathon at Mozilla office in Paris from 9am to 9pm on May 20th. IMPORTANT: The address is “16 Boulevard Montmartre, 75009 Paris, France (https://goo.gl/NLbvX1)". Make sure to bring your own laptop and French AC adaptor. Tickets limited.

The schedule of the hackathon is:

• checkin and breakfast start at 9:00am
• lunch at 12pm
• people start presenting their projects at 7pm