ReactiveConf covers all cutting-edge mobile and web tech stacks. We embrace diversity of thought, and we give you a snapshot of what’s coming next in web and mobile development.

We’re bringing world class React hackers to Bratislava to let them share unique insights.

Creators of the most popular open source libraries and world-class JS experts, you can trust us to invite the best of them.

ReactiveConf

The frontend landscape changes at a relentless pace. New ideas seem to appear every month. How can you possibly keep up? I'm on the Firefox Developer Tools team, and we are starting to move towards React and Redux for our frontend. I will explain these choices, the reasons behind them, and how we're migrating old code. Our minds can only keep up with a certain level of abstraction, and it's important to choose abstractions that solve fundamental problems rather than shallow ones. The right abstractions will make an order of magnitude difference in power and simplicity, and the wrong ones can be deadly. It's important to estimate the cost of every abstraction, and be ruthless about keeping it as simple as possible.


Works for Mozilla on the Firefox Developer Tools, mostly trying to make debugging JavaScript better. He's spent the last 8 years studying programming languages like Lisp and Scheme, and trying to bring various ideas to JavaScript. He likes to write in-depth articles about interesting programming ideas. Most of his free time is now happily dedicated to his daughter

Abstracting just enough

Imagine how easy building your web application would be if all of your data was available in-memory on the client. Falcor lets you to code that way. 

Falcor is the open-source, JS data access framework that powers Netflix. Falcor lets you represent all of your cloud data sources as one virtual JSON model on the server. On the client, Falcor makes it appear as if the entire JSON model is available locally and allows you to access data the same way you would from an in-memory JSON object. Falcor retrieves the model data you request from the cloud on-demand, transparently handling all the network communication and keeping the server and client in sync. 

Falcor is not a replacement for your MVC framework, your database, or your application server. Falcor fits seamlessly into your existing stack and lets the layers communicate more efficiently. 

Get an inside look at the innovative data platform that powers the Netflix UIs and the new UI design patterns it enables. Learn more how Falcor powers Netflix, and how you can integrate into your existing stack.

Bind to the cloud with Falcor

As programs get bigger, they also become more complex and harder to understand. We all think ourselves pretty clever, of course, but we are mere human beings, and even a moderate amount of chaos tends to baffle us. And then it all goes downhill. Working on something you do not really understand is a bit like cutting random wires on those time-activated bombs they always have in movies. If you are lucky, you might get the right one ― especially if you are the hero of the movie and strike a suitably dramatic pose ― but there is always the possibility of blowing everything up.

Daniel Steigerwald is the Creator of Este, dev stack and starter kit for React/Flux universal web applications. Angel developer, Google Developer Expert, libertarian.

Functional Programming in JavaScript. What, Why, and How

Even though I believe programming UI can be made simple, right now, front-end is hard. We’re at the very beginning of our path to the future web: simple, error-prone, pleasant to use. In this talk, we’ll see how practices we have today in back-end programming, such as immutability, use of database engines, query languages and functional programming, can help us build JavaScript UIs. Examples include DataScript, Elm, Om, ClojureScript, Relay and more

For the past ten years Nikita Prokopov has been building web interfaces, backends and distributed systems in Clojure, Erlang, Python, Java.

How immutability, functional programming, databases and reactivity change front-end

With the push towards writing CSS in JavaScript within the React community, CSS Modules have suddenly emerged as a surprisingly popular alternative that still allow us to maintain our connection with the CSS community. 

Do we have to give up writing CSS in JavaScript? Are we clinging to the past, or do CSS Modules offer a new way forward for the entire web community? In this talk we'll examine both the history and potential future of CSS Modules, and hopefully inspire the next generation of styling in React.

The case for CSS modules

We tried swapped out D3's DOM model in favor of React. The result? Love at first iteration. Building a data visualization library as React components means that you can reclaim your SVG as declarative markup, NPM install visualizations directly into your project (can't do that with bl.ocks!), fork them, remix them and file issues against them. It also meant completely rethinking how animations are done, since D3's animation model relies on its DOM model. Come learn the API, and what it means for the future of interactive data visualization.

Victory.js - A powerful data visualization library for ReactJS

The one way flow of flux has pushed us in the right direction, but we are still evolving what makes up that flow. Cerebral is a project that separates storing state and producing state with a functional flow defining API called signals.

State, UI and the stuff in between

Functional programming gives developers better ideas on how the application will react, more expected outputs, and less time needed for debugging. Immutability is one of the key points for functional programming, I'll show you some of the things we can improve on the front-end to make the code more immutable and functional.

Front‐end can be more functional

Let's zoom out of the reactive front-end story to see the big picture. How data and events propagate between clients and servers? What if clients are mobile and connections are intermittent? 
What about offline work? Can we cache our data? What if we need to act in real time? 
Welcome to the world of distributed mutable state, also known as ""hell"". Way too often, existing methods pretend that we act in a single point, at a single moment of time, alone (think ACID). 
One approach to truly asynchronous thinking is the math apparatus known as CRDT (Commutative/Convergent Replicated Data Types). I will tell how CRDT can be practically used to resolve some of the challenges mentioned.

What do Reactive apps react to?

Reactive Extensions for JavaScript is evolving! Building on lessons learned from RxJava and RxMobile, Microsoft Netflix, Google, and the ReactiveX community have begun work on the next version of RxJS. This talk will enumerate the improvements we’ve made to increase speed, reduce memory, expose locations for extension, provide more debuggable call-stacks, and enable more readable flame charts.

RXJS Evolved

React is great and Flux is awesome. Running both on the server and client is even better! You've built your app with the latest and greatest tech stack, but will your app scale to millions of users? We created and open sourced Fluxible and other libraries that support Yahoo's high-traffic web applications. I'll share our learnings and go through best practices, performance concerns, and challenges of building robust and scalable web applications.

Universal React + Flux at scale

React is a great tool for synchronizing data with views on the client side. However, to achieve perfect real-time experience one also needs to synchronize server data with client data. Unfortunately the nowadays widely used REST-like API is rather suited to one-time fetches, usually resulting in stale client data. Reactive databases such as Firebase seek to be the solution to this problem. 

I will show how Firebase can be integrated with React (spoiler alert: it can be done in a beautiful way) to get what-you-see-is-what-it-really-is kind of UX and how the FLUX pattern helps us to keep database updates clean. Since Firebase-like databases are quite fresh and immature, you may get an inspiration for a nice Friday-night project here.

Integrating React with Reactive databases

The ability to express essential complexity in a simple way is crucial for any code-base. At Mendix we did an interesting discovery during the development of a complex MDD tool. React, mutable data structures and transparent reactive programming are a match made in heaven. We published a library that leverages these concepts; Mobservable. It helps you to write simple, declarative, yet highly efficient code. Your future code maintainers will love you for applying it.

React, transparent reactive programming and mutable data structures

The web is evolving out of the browser. With the rise of React Native for iOS, and the recently open sourced Android version, universal javascript is now about fully featured experiences across web, mobile devices and soon, it will be also about smart watches, TVs and beyond. 
Device fragmentation is about to explode and the need for write-once and run-everywhere is stronger than ever. The ability to maintain a single codebase of components and logic is currently a convenience but soon will be a necessity to keep up with the plethora of devices that our services will be accessed through. 

This talk explores these concepts and discusses the foundations of a developing a device-agnostic platform. By checking out various patterns and deployment techniques we are going to see how you can power all your devices by Javascript with confidence. Yes, even your washing machine!

Let's talk JavaScript

Engineers with experience using React for web coming who dive into mobile will feel at home quickly because the basic React API doesn't change. But building for mobile introduces a different way of thinking about the software that you create and React Native empowers you to embrace this rather than attempt to hide it from you: your primary mode of interaction is touch, animations are more common and are expected to be smooth and dynamically track your gestures, you actually have to think about how your app will handle offline / poor connectivity, what happens when the user backgrounds it and comes back, how to send push/local notifications and respond to them, how to stay at 60fps performance on a much less capable device with more demanding users, responding to the keyboard appearing and hiding - specifying different keyboard types, autocorrect/autocomplete, dealing with device orientation changes and status bar changes, app store deployment delays and more. I won't go into great detail about each of these points but will rather help you to build a mental map of the space and touch on solutions that React Native provides to handle these mobile-specific problems, in order for unknown unknowns can become known unknowns. So this talk is kind of to React Native what a maphack is to Starcraft, but totally not lame like that.

From React web to native mobile: mapping out the unknown unknowns

Imagine a world without side effects, where the only way to make things happen was to call functions whose return values described what you wanted done. What gets easier in that world? What gets harder? What would that mean for debugging? Testing? 

We don't have to wonder about these things, because this world already exists — and it compiles to JavaScript. It's the world of Elm, where there are no side effects, all functions are stateless, and all data is immutable. Elm embraces the concepts that make reactive programming great, and goes one step further to shed the error‐prone mutations and side effects that so often lead to incidental complexity and buggy code. 

NoRedInk has reaped the benefits of this approach since they began using Elm in production earlier in 2015. It's helped them scale and maintain a complex front-end code base that students use to answer millions of questions per day. Come see how refreshing this world can be!

Effects as Data

Learn how Facebook uses React Native and how we run the open source project.

Under The Hood of React Native

Dato is a new way of building applications, heavily inspired by Meteor/Firebase/Relay, but informed by functional, data-oriented programming techniques. 
The goal is to provide:
Seamless, permission-aware data synching between the sever and n-clients
Seamless, permission-aware rpc invocations
A more flexible, intuitive UI layer
Advanced tooling layer for time-traveling debuggers, state serialization, component layout, query editing, performance optimizations, and others.
Integration on the backend to stream into analytics, session replay, 3rd-party integration

Dato - functional way to build reactive applications

Creating validated forms is usually a troublesome experience. Most libraries used for building forms are complex and difficult to customize. As React plays nicely with functional approach, it can be easily used to create library for creating forms that is: a) simple and easy to understand b) customizable and extensible c) providing top user experience. I will present such library for building validated forms.

Form Validation made simple with React

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. 
There have been various approaches documented on how to effectively use d3 and React together. In this talk, I will be going through a number of these approaches, talking about what I have learned from them and how I go about creating reusable chart components for large scale applications.

D3 with React

In the past two years, React and all the related projects completely changed our way of creating application by breaking all the rules and forcing us to redefine what we thought being "best practice". However, there is still an area that has not changed much : how we define the relationship between user input and application state. In this talk, I'll try to demonstrate that we can express this relationship in a simpler and more declarative way by using techniques from reactive programing and by combining React with RxJS.

Going reactive with React

If you’re like me, coming from web development, you find traditional mobile development slow and difficult to learn hands-on without a lot of guesswork, headaches and patience. Above all, things just move slower. 

The React Native Playground breaks down barriers to mobile development by making it speedy and trivial to write and test React Native code across platforms and devices. I want to share my experience working with an amazing team on this free resource. 

First, I'll give a quick tour of what's possible with the Playground, showing off some of React Native itself. 

We’ll see how React Native’s unique architecture made this project possible, revealing some interesting details of its inner workings. For example, how we're serving React Native javascript code over the web, and how we can load an application from inside another one. 

Finally, I want to briefly discuss how working on project like this, which help developers learn faster, can be fun, rewarding and an antidote to programmer fatigue.

Work and play in React Native Playground

React's future is going to be more functional, and less OOP. What if that future is already reality? How would it look like? React's foundations are reactive rendering and UI as a pure function of state. These two foundations are reactive programming and functional programming, yet React has a lot of concepts from imperative programming. In this talk we will discover how Cycle.js is purely reactive and functional, and why it's an interesting alternative to React.

Cycle.js and functional reactive user interfaces

This talk covers the evolution of Atom's view system, from its humble beginnings through the transition to React and then away from it again, and the landscape of possibilities for the future of Atom, or any large Javascript app targeting today's web platform.

View systems in Atom: Past, Present and Future

The Joy of Composition

Rewriting History with Predicates

Moving from Angular to React

React Native and Raspberry/Arduino

Game of Life in ClojureScript

Advanced React.js Performance

Elm Stylesheets

Rapid Prototyping with Relay

React Toolbox

Pyramids Be Gone

Highlights from 2015 Reactive Conference

Workshop Day Panel Discussion

Conference Day 1 Workshops

2015

Meet Those Driving the Change.

World-class mobile and web innovators get together for three days in one town.

ReactiveConf 2016 in a Nutshell

Opening Ceremony  Day 1

No open source software is developed in a vacuum these days. We are all part of a larger ecosystem where ideas and solutions to problems are shared, improved upon, and shared again. In this talk, we'll look at what Angular learned from its past as well as other libraries and frameworks like React, Polymer, and Ember, and which ideas influenced the design of Angular 2.

How the web ecosystem shaped Angular 2

Testing is the essential bedrock of software, and we can all agree it's a must­have. There are many testing tools for the front end, but most (if not all) suffer from some crippling problems. We’ll explore these problems and the solutions Cypress.io offers to take the pain out of testing.

Testing the way it should be

Reason is a new developer experience by Facebook built and championed by the same people behind React. Based on OCaml, it offers powerful type-checking, incredible tooling, fantastic performance, and truly unbelievable reach (as in you'll be sceptical that it's possibly true).

Let's look at the range of practical capabilities of Reason - building universal apps that output browser-targeted code indistinguishable from hand-written Javascript but also compiles down to ARM64 assembly for native iOS apps, or replaces 15 *million* lines of memory and type unsafe operating-system code to create unikernel servers that boot in 50 milliseconds and weigh between 200KB-10MB, all from the same codebase - to the more philosophical, such as how Reason is the first language ever to separate syntax and semantics, and all of the resulting implications - and even the more whimsical, like Reason's relentless focus on developer simplicity and joy.

Full-stack apps in one language, from hypervisor unikernel to clients written in React (or ReactNative) - As easy as JavaScript, as delightful as Elm, as powerful as native, and with unprecedented reach - we're finally entering into an age of Reason.

The Age of Reason(ML)

React Native’s asynchronous model of bridging between UI code written in JS and the UI thread that runs most of the native code has many advantages to the app users. But in same cases it may become a developer’s nightmare to deal with, especially when it comes to complex touch interactions, animations or "that damned AsyncStorage". In my talk I’ll be giving some tips on how to not get lost in the asynchronous world of React Native app development. We will discuss some common mistakes and important app and library design principles that are imposed by the asynchronous nature of the bridge.

Living in an async world of React Native

This talk will explore future directions for the creation of reactive applications.

What's Next? Exploring the future of React

Building modern apps requires a lot of boilerplate backend code - setting up server endpoints, forwarding requests to the database, and performing authentication are examples of code developers have to write over and over again. In this talk you'll learn how to dramatically cut down development time by using prefabricated, open-source backends like loopback.io and deepstream.io, and how to extend these backends with custom code once your application outgrows the functionality available out of the box. We'll also talk about how prefabricated backends are changing application architectures, and the impact end-to-end event driven application development is making on end-user experience. We’ll also talk about our journey through the process of solving these problems in RethinkDB and Horizon, and how we see the future of web development unfold. Horizon is an open-source developer platform for building realtime, scalable web apps. It is built on top of RethinkDB, and allows app developers to get started with building modern, engaging apps without writing any backend code.

Speed up app development with prefabricated, extensible, open-source backends

State changing over time is a frequent cause of bugs, confusion, and general hair-pulling, and we've developed a number of ways of trying to tame it—observables, concurrent sequential processes, continuation passing style, and async/await. Learn how each of these paradigms work, hear about the advantages and disadvantages of each, and more importantly, discover what they have in common, because they might be more similar than you think.

Paradigms for dealing with asynchrony

Optimistic updates in a pessimistic world

MVC frameworks made single page applications a lot more accessible to front end developers. Routing is a key feature of MVC frameworks, enabling view and URL changes without a full page reload. It has shaped a vision of routing which is specific to MVC frameworks. Nowadays, with functional and reactive programming influences, dedicated view libraries, and more runtime environments available (server-side rendering and native apps), routing is starting to look a lot different. This talk will give an overview of how routing used to look, and how it is likely to look like going ahead.

Past and future of client-side routing

At NoRedInk, we've been heavily using Elm and React side-by-side in production for over a year. After 35,000 lines of Elm code and about the same for React, we've learned a lot about how well these powerful technologies coexist in a code base that's been battle-tested by students who have used it to answer over a billion questions. This talk will be a deep dive into Elm and React from a production perspective—what's familiar, what's different, and how they can work together. We'll start with initial adoption, continue on to shipping new features, and progress all the way through maintenance and scaling. We'll also look at the nontechnical impact of each: hiring, onboarding, and managing technical debt. Come see how two of the most revolutionary front end technologies on the planet can work together!

Elm and React in production

Redux is a predictable state container for Javascript (and React) that is becoming more and more popular.

In this lightning talk, I will show you that while Redux is great, it contains too much boilerplate for small-to-medium sized applications.
To alleviate this problem, I will demonstrate how to keep Redux but customize it and bend it so that you can keep most of its useful properties and, at the same time, reduce the boilerplate.

Hopefully, this will show that you should not take Redux out-of-the-box, but rather think about how to customize it to fit your project.

Reducing Redux Boilerplate

Elm is a statically typed functional language that compiles to JavaScript. It’s well-known for its developer experience: the compiler provides nice error messages, the package system enforces semantic versioning for all published packages and makes sure every exposed value or type has some documentation and type annotations.

Elm-search builds on these nice properties and provides a search engine for all exposed values in the latest versions of all published packages. One can either search by name or by approximate type annotation. It’s like a basic Hoogle for Elm. In this talk I’ll show how the indexing and searching works, how Elm made it nice to develop and how the search can assist developers in their work.

https://gist.github.com/klaftertief/dc355759b9716516f46b861512936d60

An API search engine in Elm for Elm

At Blueberry, we’ve been frustrated with maintaining and getting oriented in our React components and their props. That’s why we made a tool for automatically generating a component library from a project’s components. We named it BlueKit and released it as open-source.

Developers, designers, and other project members can use the generated library to browse through components in a project, tweak their props, and see a live preview of these changes. I’ll talk about the problems that inspired us to make BlueKit and how it can help React devs with their projects.

https://gist.github.com/ondrejbartas/9201a080f820779f100027e576cc534e

React is the new Lego - how we deal with a lot of components

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.
Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code.

https://gist.github.com/nikgraf/4e973205eb7b60ecf974c568d2322a38

Rich text editing with DraftJS Plugins

As a JavaScript developer, could you imagine using something else than Atom, Sublime or other IDE-like text-editors? In their daily work, people wrangle a lot with different applications, editors, windows, browsers and loose a lot of time because tools getting in their way.

A lot of people are using the terminal already. So why not just leverage it to its full extent? In this lightning talk, I will present how I will do regular JS / React programming just in one terminal window.

https://gist.github.com/ryyppy/9b9b46836a1caf0f1dfbc44032de7ff7

A Life on a Commandline

I will articulate what I have come to find to be a superior approach to building React applications — treating them as functions, not templates.
I will introduce how to:
- Separate the application you’re building and the platform its on from the components you write (Hey, that’s this one! Read on!).
- Inject state into your application, and what a “container” aka “connected” aka “smart” component really is.
- Implement more complex features by leveraging Higher Order Components and a compose function — it’s awesome.
- Make your application UI understandable by looking at a single file, not dozens.
- Make your codebase flat without sacrificing grokability.

https://gist.github.com/adamterlson/7997795e4735f5c4a495c8dabd4c368a

Reconceptualize your entire app as a function

In regular websites, it is common to sent multiple events to track users clicks. Single Page Applications change the way you look at metrics. This talk is about a simple framework we created at Globo.com to manage a metrics layer for http://globoplay.globo.com. The talk will cover how to track user flow using Google Analytics and other services. The challenges we solve were tying metrics and components, keeping information across pages and having global data. Also some React, React Router and React Side Effects concepts like context, higher order components, history state will be covered.

https://gist.github.com/jcemer/b1bbecc8d11556aa5d7279cb4b0b77c5

Thinking metrics on React applications

Recently I wrote a small package called react-css-themr, which allows you to separate styles from components, plus an easy API to compose and inject styles. Currently I’m migrating React Toolbox to this approach and, although I don’t know yet how this will it work, I’m sure it’s gonna change how we handle styling for vendor components, making easier to customize this and any other library.
I would like to tell you how it went in a lighning talk at Reactive 2016, dropping some thoughts about styling components in React. Star this gist if you want to give your support!

https://gist.github.com/javivelasco/1a095a673c221bc5c69246a4519b353a

Styling in React

I'm going to talk about writing a markdown editor which will output customizable React components, and also accept custom syntax for rendering custom React components.
The talk is going to explain the following things:
- Writing a markdown editor in React
- How to render the markdown syntax as React components
- How to customize the rendered React components
- How to plug-in custom syntax for rendering custom React components
The final result will look like this 👉 👻 spoiler alert 👻

https://gist.github.com/kitze/14f0ec52c97e5d4a6ee4d6204e71046a

Markdown + React = 💙

I work at Grammarly. We like React and happily use it in our applications. However, sometimes something goes wrong and bugs creep into the code. Here comes testing. It helps make us confident about the quality of our code.

https://gist.github.com/A-gambit/1ded6bf07cf4a497fc6eeb3e082ac612

Road from UndefinedLand

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 6561 lines of CSS (and just 5 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

https://gist.github.com/alekseykulikov/68a5d6ddae569f6d0456b0e9d603e892

With good naming convention, CSS works pretty well

ReactiveConf 2016 Opening Day 2

Building user interfaces on the web is hard, because the web, and thus CSS, was inherently made for documents. Because UIs fundamentally are not documents, we've seen a mindset shift towards building them as component-based system – we are now in the component age. The rise of JavaScript frameworks like React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and styleguides being considered 'the right way to build web applications' and many other things have illuminated this revolution. With that, and a few more things, in mind, Glen Maddern (CSS Modules creator) and I sat down and started thinking about styling in this new era. We took the best of CSS and the web to build a new way to style react applications. Let's talk about what we thought about and why we arrived where we did – 💅 styled-components.

Styled-components: Enforcing best practices

Creating validated forms that provide great user experience can be much trickier than you think. I will show you what problems you might encounter... and the answer to these problems.

Building validated forms with great UX in React

React played a pivotal role in the widespread emergence of universal/isomorphic apps, rendering on both the server and client. However, many applications continue to render purely on the client, and for good reason—running a React server in production doesn't come without significant challenges. Typically we find ourselves having to choose between these two competing approaches, but there's a lesser-known third option—using React to pre-render our sites at build time, whether partially or fully. In this talk we'll cover why you'd want to do this in the first place, and how modern tooling can help us achieve it.

The Universality of Static Sites

What if instead of building your own mental model of how data flows through your application, you could actually see the data flowing in real time? In this talk, we will explore functional and reactive streams as a building block in JavaScript applications with tools like RxJS, Cycle.js, or xstream which enable DevTools from the future.

Visualizing the data flow with Cycle.js

Writing Sound Asynchronous Code with Coroutines

Mutable or immutable based state management. That is the question. But what if we could have both? In this talk we will explore an opinionated state container that serves both worlds. A single coin with two different sides. Mutable properties, instance methods, immutable trees, structural sharing, replay-able actions, time travelling, derived values, patches.. etc. This what next-gen state management might look like.

Immer-mutable state management

Debugging in Production: A Preview of CodePush vNext

If you’ve used the Facebook iOS or Android app in the last four years, you’ve used a mobile app powered by GraphQL. In fact, development of GraphQL started in 2012 as part of Facebook’s effort to move from web-based to truly native mobile apps, and it is now a core part of the Facebook infrastructure. It is no surprise GraphQL was first conceived to serve the needs of mobile developers, and so comes with many benefits. We'll talk about all of them, and also why you should get a grasp of GraphQL in the near future if you haven't done so, whether you develop mobile apps using web technologies, React Native, native iOS or Android.

Building better mobile apps with GraphQL

React Native does a lot out of the box, but also provides very powerful abstraction layers that can enable you to get React Native to work for your use case, even if it's not supported out of the box. The bridge, Native Modules, and Native Components are a big part of this. When integrating with large existing native code bases, this becomes more and more important.

Bridging the Gap: How to use React Native in existing large native code bases

React Native is a flexible & pragmatic tool that lets you mix JavaScript and native code with minimal friction. But for some large subset of apps, there is no need for any app-specific native code, as long as a rich library of native APIs are exposed. If we are explicit about constraining our environment to only JavaScript, our apps gain some very useful properties. Just look at how easy it is to throw together a simple app and share it on the web. Let’s look at how far just JavaScript can get us with mobile apps, building on top of React Native.

No Xcode, Android Studio, Java, Swift, Objective C - how far can JavaScript get you?

Through the Looking Glass

ReactiveConf 2016 Closing

2016

Discuss the future of development with tech leaders from across the world.

The React Productivity Revolution

Flutter, Google's open-source platform for developing high-performance mobile applications that run on multiple operating systems from the same codebase, sports a modern reactive architecture in addition to an attractive widget library. This talk covers how to adapt state management strategies like Rx and Redux for use with your Flutter application.

Architecting the Reactive Flutter App

Let's Tree-shake it...

Client-server synchronization is the next frontier. Now that DOM/UI rendering is more or less solved on a frontend, and efficient servers are easy to write, we need a good understanding and solid model on how to pass data around in a reliable, efficient and easy-to-use way. What makes it interesting is that there’s no good answer to that question yet, so a lot of discussions, papers and libraries are happening right now. Another thing is that it seems that we’ll need to change the way we think about data, and the change will affect client, server, DB and maybe even our programming languages. 

Client and server need to talk

Almost 3 years ago, the first experiments concerning “CSS in JS” have emerged. In 2017 - at least since styled-components got released - writing styles in JavaScript is not at all experimental anymore. Many developers are still sceptical about it.

This talk summarises both the good and the bad parts as well as the opportunities & future possibilities of CSS in JS. It will help to understand how everyone can benefit from writing styles in JavaScript. It will not give any advice on which implementation to choose.

CSS in JS: The good & the bad parts

In this talk, we’ll cover how we can build an advanced compiler that turns the constraints of templates into a powerful advantage. By modeling web applications as a specialized bytecode that runs on top of an optimized VM, we can produce code that starts fast and stays fast out of the box.

Creative Hacking: Delivering React Native App A/B Testing

Logux is a new project which replaces AJAX by synchronizing Redux actions in real-time between client and server. It is based on the ideas of CRDT and brings plug&play support for live updates and offline editing. Andrey Sitnik, the creator of PostCSS and Autoprefixer, will explain how his team, Evil Martians, uses Logux with Amplifr, its difficulties, and the resulting productivity boost.

Using Logux in Production

At the end of May I've announced together with Lee Byron that GraphQL Subscriptions are now officially part of the GraphQL Spec.
That is a big deal for all real time apps out there!

But when adding real time capabilities into your app there is a lot to consider - both on the client and the server.

In this talk I will explain the concept of GraphQL Subscriptions, why it's such a big deal for real time apps, but mostly talk about how to make it work in your existing app today, no matter how large or old it is...

GraphQL Subscriptions - Scaling real-time in the real world

Jest as a Platform

With the rise of modern JavaScript build toolchains such as Babel, webpack and PostCSS, compilation has become an indispensable step in building JavaScript applications. This compilation step, in addition to providing access to new language features, also provides the opportunity for performance optimizations. Minification is one such example, but there are many more possibilities. This talk will explore some existing ideas in the category of build-time optimizations, introduce related work in the Vue ecosystem, and discuss some ideas for future experimentation.

Compile-time Optimizations in JavaScript Applications

RON: Replicated Object Notation

When we talk about D3 and React, the conversation often becomes: who should have control of the DOM? After all, React is a view layer and its 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 with web technologies - and sometimes, it too needs access to the DOM. So when should React have ownership, and when should D3? And stepping back, when should we even use D3 and React together? If all we want is a visualization, D3 is more than enough, so at what point do we need to add React to the mix?

In this talk, I will give guidelines on when React should render to DOM, when D3 should instead, and the pros and cons of each approach. More importantly, I will cover the interactions and applications that will benefit the most from using D3 and React, together.

D3 and React, Together

I've just spent a year migrating an application to React and in this talk I'll share my experiences, good and bad, about how it's gone, both technically and non-technically, and cover all the potential pitfalls of a long running migration project.

The application I look after at work is a large ticketing platform that was written using Angular 1 and has not been maintained. With the new release of Angular 2, we made the decision to migrate off Angular and onto React. In this talk I’ll discuss why we did this (without criticising Angular, it has served us well) and how we’re migrating in small chunks. A big rewrite was off the cards; this application is business critical and as such we can’t afford to not be able to fix existing bugs or quickly add features because we’re rewriting. Instead we’ve split the work down into many small pieces that we can tackle one at a time. I’ll go through some code examples and talk not only about the benefits but the negatives too, because it’s not all been plain sailing. We’ll see how React’s approach and characteristics make it very adaptable and we’ll look at how we updated tests as we went to ensure our migrations maintained feature parity.

If you’ve got an existing application you’d like to migrate this talk should give you plenty of ideas about doing it in a non destructive way without rewriting and building from scratch.

Lessons Learned Migrating Complex Software

ReactXP: How We Rebuilt (Almost) All Skype Clients

Today we have languages like ClojureScript, BuckleScript, and Elm, which treat JavaScript as bytecode; they compile to it, but do not emulate its design. They make it possible to build an entire modern web app without knowing JS.
Picture that same approach applied to HTML and CSS, and you've got elm-style: a library that doesn't have goals like "let's make vertical centering in CSS easier" but rather "let's scratch-build a layout and style system where vertical centering is innately easy. Where accessibility is natural and not an afterthought. Where it's as easy as possible to go from the design in your head to working software, and where you can maintain it once it's in production."

It's now possible to ship an entire responsive, performant, accessible, web app without knowing JavaScript, HTML, or CSS. Come find out how!

CSS as Bytecode

Randomized testing is a concept popularized by the Haskell library QuickCheck which uses function input type annotations to automatically generate many randomized sample inputs for a single test case. Here we talk about a JavaScript port of this idea that instead uses Flow type annotations.

Property-Based Testing for Godly Tests

You may have heard a bit about Reason -- the new initiative out of Facebook to bring JavaScript-flavored OCaml goodness to web developers everywhere -- but what's the big picture?
Reason has a lot of things going for it: fantastic JavaScript interop, a powerful, battle-tested type system with cross-file inference, macros, and plenty of hype. It was started by the folks at Facebook who invented and built React, and already powers a substantial portion of Messenger.com.

We'll go over the basics of Reason, and answer these questions:
- What does it look like to write React UIs with Reason?
- When will Reason be ready for me to use at work?
- What does it look like to incrementally adopt Reason in a JavaScript codebase?
- What tradeoffs has Reason chosen, and how do they compare to other languages?

Reason: JavaScript-flavored OCaml

Some people will tell you that templates are a “less powerful” way to build UIs for the web. But what happens if we view Handlebars templates through the lens of a high-performance functional reactive programming language?

Secrets of the Glimmer VM

As superfluous as something like animation may initially seem, you can tell a lot about framework by the way that it handles the concept of time. Idiosyncrasies and race conditions in rendering reveal themselves, pauses in DOM and virtual DOM diffing can be exposed.

This is one of the ways Vue shows itself to be uniquely capable and elegant as a framework. In her talk Sarah covered the use of the transition component and some of its offerings to create fluid effects in the browser. Then she discussed watchers and transitioning state and finished up by talking about lifecycle methods, asynchronous updates, and pushing our animations to the next level.

Animating Vue

Unique Value Proposition of CSSinJS and the Future

Styling Components for React UI Kits

Relay Modern or Apollo?

Reactive programming is perfect for some use cases in web development. For instance, Angular’s HTTP module transforms HTTP requests to RxJS Observables by default. If you enjoy using Lodash or Underscore, think of RxJS as their async version. What does this mean? What are Observables? How should you chain HTTP requests the RxJS way? This and more will be presented and show cased in on an Angular Application.

Reactive Programming with RxJS

Open Source 2.0

Understanding webpack from inside out

Styling in CSS

Gavin Doughtie AMA

Tiago Forte AMA

David Nolen AMA

Richard Feldman AMA

Jared Forsyth AMA

Igor Minar AMA

Evan You AMA

Navigating the Frontend Landscape Without Encountering JS Fatigue

Coding Dojo

Evolutionary Frontend Architectures with Angular

Mobile-First IoT-Ready Cloud Architecture

15 less known webpack features

Inspiration talks

Through the Sound Barrier

The State of Mobile Development

Lightning Talk - Matthias Rella

Lightning Talk - Albert Nemec

Lightning Talk - Darpan Kakadia

Lightning Talk - Gregory Shehet

Lightning Talk - Honza Brecka

Lightning Talk - John Wargo

Lightning Talk - Kamlesh Chandnani

Lightning Talk - Lenka Vondrackova

Lightning Talk - Pavel Aksonov

Lightning Talk - Richard Feldman

Uri Goldshtein (https://github.com/urigo), introducing the new GraphQL Codegen. you can generate typings, REST endpoints and even full backends!
Check it out here: https://github.com/dotansimha/graphql-code-generator.