For more than a year now, React.js has changed the way we think about client-side applications through concepts such as the virtual dom, one-way data flow, immutable data structures and isomorphism.

ReactEurope is the occasion to meet the core team and other awesome members of the community to learn, socialize and have fun in the beautiful city of Paris with great food, entertainment, connectivity, prizes and more!

ReactEurope

Keynote

React allows you to write styles inline and bypass a host of CSS shortcomings. Scope, dependency management, dead code elimination, these problems go away when adding your styles directly to components. But it's not all rainbows and unicorns. Things like theming and media queries become much more difficult when all your styles live directly on components. In this talk, we'll look at how to solve these problems with contexts and plain old JavaScript. We'll also look at the role of container-components and when it's better to "just use CSS."

Inline Styles: themes, media queries, contexts, & when it's best to use CSS

Flux is most often used to implement shared state within a single window. But done properly, this architecture can be used to implement real-time, multi-user shared state between many users of the same web applications. Using HTTP requests to dispatch stores, and Websocket to broadcast updates, Flux over the Wire has the potential to trivialize several hard problems. While the idea of using Websockets to back Flux is rather straightforward, doing it in a way that scales up to tens of thousands of concurrent viewers can prove challenging. In addition, Flux over the Wire offers an interface which considerably eases server-side rendering, as it completely abstracts data fetching and data syncing from the React views that tap into its stores and dispatch its actions. 

Flux over the Wire

React Native's architecture has opened up many possibilities for re-inventing the clunkier aspects of UX construction on traditional platforms, making it easier and faster to build world-class experiences. This talk will walk through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience.

React Native: Building Fluid User Experiences

At React.js Conf last January, we introduced the idea of GraphQL: a data fetching language that allows clients to declaratively describe their data requirements. Let's explore more of GraphQL, it's core principles, how it works, and what makes it a powerful tool.

Exploring GraphQL

Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield!

Don't Rewrite, React!

React’s unique strength is bringing to JavaScript development some of the benefits previously exclusive to more radically functional languages such as Elm and ClojureScript, without forcing you to completely eschew local state or rewrite code with exclusively immutable data structures. In this talk, Dan will demonstrate how React can be used together with Webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.

Live React: Hot Reloading with Time Travel

Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their data requirements, and compose together to form truly modular applications. This talk will explore the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. We’ll also see examples of how Relay powers applications as complex as the Facebook News Feed.

Relay: An Application Framework For React

Zalando's tech department has built most of their platform in-house, using open source and cutting-edge technologies such as React, Scala, Python, Cassandra, Clojure, AWS, and Docker. We work in small, agile, autonomous teams and build our systems around five key principles: API First, REST, SaaS, cloud, and microservices.

Zalando

Paradoxically that today it is easier to create GUI than Text UI. Developer has an arsenal of different GUI libraries and layout engines. When one decides to write Terminal Text UI app he faces obstacles of Text UI DSL Library, imperative layouts, constantly increasing complexity and underdeveloped approaches. In this talk I will show you how to ask browser layout engine for help, how to avoid slavery of DSL and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.

Back to Text UI

React has always been about the Virtual DOM. A nice way to render HTML (and some of SVG and maybe some Web Components). Although there's also react-art, react-three, react-canvas, react-curses... Oh, and react-native! Even if you bottom out at HTML, most of what React does really well is rendering to OTHER React components. Meanwhile most projects still try to retrofit our needs into HTML and CSS primitives. I'll talk about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps.

DOM as a Second-class Citizen

Rangle.io

Automattic

Thinkmill

Red Badger

Soon after React Native's release, I started working on this tool to help share and test React Native apps: the React Native Playground (https://rnplay.org). Soon after, a team build around it and made it awesome in a matter of weeks: picking up sponsorship from Appetize.io and building an iOS app with React Native itself.  This talk is a quick overview of how it was built, highlighting the importance of early adopters and runnable examples.

Building the React Native playground

Why does it become difficult to create and maintain components as your single page app ages?
What if components were completely decoupled from other components and the global app state?

How to design components that are truly encapsulated?
This talk walks you through the development of Cosmos[0], a one year journey to create an elegant tool for designing encapsulated React components. How it started, the milestones and insights along the way, and what you can do with it today (live demo of Flatris[1] components insideComponentPlayground).

[0] http://github.com/skidding/cosmos
[1] http://skidding.github.io/flatris

Cosmos

Este.js is the most complete React/Flux dev stack. The perfect cure for developers already tired with mainstream frameworks  like Angular or Ember.

It ships with lots of goodies including immutable single app state, top-down data passing and intl translations out of the box!  So let's use all these features to start building native apps!

In this lightning he is walking you through the process of transitioning Este.js dev stack to the native world  outlining the most common problems and pitfalls we needed to face, including:
  - Project setup - preparing the native application ecosystem and reorganising the folder structure
  - Migration - moving the codebase to React Native, deciding what files can be just dropped in and what needs to be rewritten
  - Styles - replacing stylesheets and mixins with StyleSheet showing good-to-use patterns we can use to make it all maintainable
  - Routing - handling lack of the React Router with custom navigation on top of Navigator

http://github.com/grabbou

Going native with Este.js

Rule number 1 of context-club, is don't talk about context. It's undocumented and subject to change, but lots of libraries need it and use it. This talk promises to be a humourous look at context, and will go through the concepts and APIs, whilst attempting not to mention the word "context".  Some things are due to change in 0.14, and there's plenty of discussion going on about how to move forward with it, so let's get prepared.

https://github.com/bruderstein

Everything they don't tell you about context

Sunil works as a UI architect for myntra.com, which famously shut down its website earlier this, year to go app-only. He talks about how he dealt with the situation personally / professionally, he wrote some thoughts about this https://myntra.github.io/2015/05/17/personal-thoughts-on-the-shutdown-of-the-myntra-website/,  how React saved his career and sanity, and what their new stack is starting to look like.
    
Featuring disto, his flux framework with full record / replay, dev tools, hot loading, etc, and cortex, myntra's in-house native 'content system', to be open sourced later this year.

Disto

d3 has been the de facto standard when it comes to data visualisations for a while now and React has recently emerged as the go-to library for building user interfaces. d3 and React are both data-centric libraries, making them a natural fit; d3 takes a data-driven approach and React aims to solve the problem of data changing over time in the context of building large applications.
    
In recent months, there have been various approaches documented on how to effectively use d3 and React together. In this talk, I will be going through what I have learned from all those approaches and how I go about creating reusable chart components with some examples of things I have already built.
    
All reusable components that I make use of and present during my talk will be open sourced.

http://ansavvides.github.io/
https://github.com/AnSavvides

D3.js with React

In the first wave of Flux frameworks we built our own (it seems everyone had).

However, we don't like the amount of boilerplate code we have to write, and we haven't found any Flux library that would solve that.

There's a light at the end of the tunnel, and it's called Relay. Two problems. Relay is not here yet. And it's not designed to work with REST. Our entire platform is built as a collection of REST services, and we have JS SDKs that wrap around the endpoints.

So the question is, can we have *something* that is as simple to integrate with React components as Relay is, and lets client-side models deal with data persistence?

We have a POC and a plan. At this point I'm not sure if the plan will work out, which makes this talk proposal really interesting - either it's going to be about a brand new library, or it will be a reflection on what went wrong / why it can't be done. (But hey, we're engineers, it *has* to work. Trust me.[0])

[0] http://cdn.mothership.sg/wp-content/uploads/2014/11/engineering-meme-3.jpg

http://petrbela.com
https://github.com/petrbela
https://github.com/chute/turbine

Relay-like REST-friendly Immutable-based data lib

Most React developers already use a build pipeline to transform their JSX into vanilla JavaScript. This is usually under-utilised only doing basic transformations such as concatenation, minification and linting. In this talk, Sebastian will go over how this already existing infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy.

Improving Your Workflow With Code Transformation

A talk on the past, the present and the future of animation, and the place React can potentially take in this. I will be focusing on a few experiments on animation I've done, specifically: react-tween-state, react-state-stream and some unreleased transition-group related thoughts and work.

Make sure to checkout react-motion demoed in this video: https://www.npmjs.com/package/react-motion

The State of Animation in React

At Twitter, teams have starting adopting React because it’s enabled UI engineers to forget about time when writing rendering code. And we've started exploring similar simplifications in the data layer, embracing the UI’s role as part of a distributed system. First, we'll share how user experience choices are a primary influence on how we design the data layer, especially for teams developing new products with full-stack capabilities. Working with data from multiple backend services has powerful benefits, and shapes the problem space for UI engineering. Next, we'll look at how React and Flux approaches can help in our problem scenarios. Yet even after the advances in React’s component model, the data layer is still an important source of complexity as an app grows and changes over time. Finally, we'll look at new approaches we’ve been exploring, and how designs like decoupling 'recording facts' from 'computing views of those facts' have influenced UI engineering. These designs nudge teams towards simplicity when creating impactful user-facing improvements like real-time updates, optimistic commits, and graceful handling of network outages.

Simplifying the data layer

React.js is changing the way developers think about mobile app development, especially with the recent announcement of React Native. However, in many ways hybrid (web + mobile) app development is here to stay for a large number of mobile apps. Everyone's heard "you can't build a native experience in a web view". We disagree. You just have to know the right tricks. And when you do, the web becomes an incredibly powerful platform for delivering amazing user experience using the technology you know. At Thinkmill in Sydney, over the course of developing several commercial apps, we've experienced the power of using ReactJS for mobile apps built on web technology, and developed a framework we call TouchstoneJS (which Tom Occhino called "the best looking and feeling implementation of this that I've seen" during the Q&A session at React Conf) to share this capability with developers around the world. In this talk I'll share what we've learned and how we've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of our development process and framework. I'll also talk about what you can do with the web platform that you can't with native apps, and even React Native.

Going Mobile with React

Since May 2014 over 100 people have contributed code to React Router and many, many more have filed issues, given talks, and used the router in both server and client environments. It has been mine and Ryan's privilege to work with and learn from these wonderful people and to guide the direction of a library that we hope will help us all build amazing products and tools with React over the next few years.

This year we are introducing support for React Native and we are working closely with the Relay team to ensure the router meets the needs of React developers everywhere React runs. More importantly though, we are focused on bringing great experiences to consumers of applications built using React Router. In this talk, we will discuss how your users can benefit from the many tools the router provides including server-side rendering, real URLs on native devices, and much, much more.

React Router

In this talk, we'll take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one?

Creating a GraphQL Server

Flux provides a good framework for building rich client applications, but did you know you can reuse the flux architecture for server rendering? In this talk, I'll walk you through an isomorphic Flux architecture to give you the holy grail of frontend development. With this architecture you'll be able to reuse all of your application code on the server and client without worrying about server-side concurrency issues that you may see with stock Flux. Once the concepts have been explained, I will introduce the open source libraries that we have open sourced and are powering many of Yahoo's high-traffic web applications.

Isomorphic Flux

React provides us with a lot of tools for building components, but isn't prescriptive about how we use those. Objects can have props, state, and instance fields. When is it best to use each? We've heard a lot about pure components, but how do we make pure components when we have to deal with the realities of a stateful world? How do we make more complex components whose props actually represent them? We'll cover how we've answered these questions at Khan Academy, including techniques and patterns to make dealing with large pure components simpler, as well as current open questions.

Building submarines that don't leak

Chrome is great, but 3rd party extensions make it better. The iPhone is great, but apps make it better. You React-app may be great, but imagine if you could safely and robustly allow 3rd party extensions to enhance it. We'll talk about specific features of React & Flux, React CSS, programming design patterns, and custom libraries, which can turn a static application into a dynamic platform that an ecosystem of developers can build on top of. We've built a highly-extensible desktop email client with React & Flux on Atom Shell, and we'll also show concrete examples of where these tools enabled a 3rd party ecosystem of email plugins. Our goal is for you to take away how to use React to be more than just great application developers, but now great platform developers as well.

ReactEurope 2015

Jul 2 - Jul 3 | Paris, France