ReactiveConf is a 3 day European-wide web & mobile development festival in the heart of Europe made for functional developers, where World-class JS experts share unique insights.

ReactiveConf

Wrap up!

The Web has a unique feature - it makes information accessible and discoverable by both humans and machines. Virtually everyone using the web relies on search engines to find information and get their questions answered. As we build richer and richer web UIs we need to ensure that they remain accessible to both humans and machines. In this talk, Igor covered real-world strategies and tips that make rich JavaScript web applications and the information they provide accessible to search engines.

Building search engine friendly web UIs with JavaScript

A majority of people that access the web do so in spotty internet conditions. Whether users are accessing the web on the subway or attempting to connect with the world in a remote location somewhere on the globe, the ability to access a usable web platform in all conditions can become a norm. This talk will take a deep dive into service workers and the ways you can integrate them into your apps to create a seamless web experience for users everywhere.

Increasing User Access through Service Workers

Keeping developers and designers in sync is an ongoing challenge for our industry, with each discipline working in completely different mediums. In the past few years, we've seen mass adoption of component systems with locally-scoped styles, which has led directly to the emergence of tools like react-sketchapp and html-sketchapp that allow us to generate static design assets from real production code. Now, we're beginning to see a real feedback loop from development back into design—but what does this mean for traditional design processes? What does this mean for the future of front-end development? In this talk, Mark began to answer these questions by running through a real-world example of this technique, had a closer look at how it all works, and showed you how you can start experimenting with this yourself.

Sketching in the Browser

1. Speaker: Sergey Tkachenko
Do we need types in JavaScript?
In this talk, I want to share my experience gained during the development of frontend applications in several programming languages. I think it's not a secret for anybody that developing large JavaScript applications is not so easy as it seems at first glance. We all want something simpler and more reliable. Therefore, many developers and even entire companies switch to different, compiled in JavaScript, programming languages. The bulk of such transitions is accounted for TypeScript and flow, and often, developers faced with more problems than they were before. I wasn't the exception. Moving to a new project, I started using TypeScript and was disappointed. Luckily in my next project I used ClojureScript and it was like everything is illuminated! Since then, I know exactly what the recipe for simple and reliable code (even in plain old JavaScript). And I want to share this recipe with you.

2.Speaker: David Kopal
Write better React
Do you want to write better React? In that case, you shouldn’t use it with JavaScript. Why? Because JavaScript isn't compatible with React's core principles, meaning you need to mimic them using many external libraries. Fortunately, Reason is here and ready to help you out through writing safer and cleaner React code.

3. Speaker: Jakub Svehla
Avoid runtime errors with 0 lines of tests & types.
I'll show you how to not to waste your time with resolving runtime errors. Our company has only 2.5 developers so we have literally no time for writing tests or types (yeee... it's still boring). We will use the most modern bleeding edge Javascript stack based on graphQL & relay modern & flowtype for solving this pain. And don't be scared, everything is production ready and we are using it.

4. Speaker: Stefan Nieuwenhuis
How to build a framework independent component library with StencilJS
Challenge: Build a frontend component library for multiple teams with a technology stack ranging from VanillaJs to React. Let's take up this challenge with StencilJS!
What is StencilJS? StencilJS is a compiler that generates Web Components. It combines the best concepts of the most popular frameworks into a simple build-time tool.
What you can expect to see How to build a Web Component with StencilJS How to use it in an Angular, Vue.js and React app

Lightning Talks - Day 1

Keeping up with the JavaScript community can be one of the most difficult yet enjoyable parts of being a frontend developer. It is not easy to know what will truly deliver lasting value to your development as opposed to what is merely a passing fad or what will fail to live up to its hype. Max's at PayPal has been excitedly using GraphQL in many of our new apps. They love the idea of a single endpoint providing frontend developers access to the great multitude of PayPal services. In their excitement for GraphQL, they also implemented Apollo Client and React Apollo into our app. After all, the boilerplate and heavy weight of Redux has been much maligned, and they saw and easy way to significantly reduce the amount of code we wrote, all the while utilizing the sleek new utility for state management that Apollo Client provided. However, they soon realized that they had made a mistake and pre-emptively jumped into Apollo Client. The fact of the matter is, Redux is much more than simply state management, and they had failed in their original estimation to fully appreciate what Redux gave our app that Apollo Client simply does not. This talk will explore why they initially were so excited about Apollo Client and why it was their first choice. It will then explain how Apollo Client fell short of our needs, and why Redux is a significantly better choice for most larger applications. Finally, it will hope to inspire a reappreciation for Redux.

A Reappreciation of Redux

We all heard of CryptoKitties - in this talk we will build a web interface to our own small dApp and learn how to communicate with the Ethereum network.

Talking with Ethereum smart contracts from the browser

Alex builds/maintains a Mobile Checkout app (at FutureProofRetail.com), which like Uber/Lyft and other popular ride-sharing apps, involves a tight coordination between server state and app state. This kind of app is very difficult to build and test with confidence, and Alex presented on the current state of design patterns and best practices to facilitate building such an app. Alex touched on Uber's open-sourced RIBs architecture, as well as what we've built in Ember to make it easier to build these kinds of apps. Alex believes this talk will be of interest to anyone who's tried to build an app with a live socket connection to the server (e.g. WebSockets), which is probably most people at this point :).

Best Practices for Architecting Server-Driven Web/Mobile Apps

Reusability is often listed as one of the core benefits of component-based architectures. While in theory it’s pretty straight-forward, in practice, writing truly reusable components is way more complicated. How do we customize styling? how to render to non-browser environments? There are all valid questions and issues with current solutions. But, following some rules and patterns can help to minify the problems. Follow me along my quest to achieve maximal reusability and delightful component sharing.

Reusability: Sharing Components

React Native allows you to re-use your web code to build native applications. What’s not to like? This approach is simple in theory but challenging in practice. In this talk, you’ll learn what is re-usable and what isn’t, the intricacies of shared code bases, and cross-team communication when building React and React Native apps at the same time. With real-life examples, code snippets, and memes, you will learn everything you need to know to get started on your native journey.

Going Native

Components with a unidirectional data flow have become the most popular way to build UIs. With such architecture, there is still one outstanding question: what do we do with side-effects? And they are everywhere: logging, error reporting, network requests, websockets, analytics, storage persistence, etc. In this talk, we will explore how observability is key to side-effects, and how reactive programming can unleash a slew of possibilities. I'll demonstrate how a new library called Refract can help you be more Functional and Reactive in React.

Be More Functional and Reactive in React

David shows us how to reduce code complexity. State Machines are great for small apps, while Statecharts do wonders for large-scale apps.

Have you ever worked on an app that started off simple, but as the number of features, states, and edge cases grew, it became much more difficult to maintain? Most of us know this struggle all too well. As the number of possible states in your app grows, developing UIs can become exponentially more complex. 

With the help of finite state machines (FSMs) and statecharts, you will be able to manage your app's states in a simple, robust way, and even visualize them, and interpret them reactively, with the help of xstate and RxJS From traffic lights to avionics systems and space missions, 

FSMs and statecharts have been used in many critical systems and user interfaces worldwide for decades. By taking a top-down approach of formalizing your app's states and actions into declarative statecharts, you can develop apps that are robust, testable, extendable, and easily communicable with project managers and designers. 

In this session, we'll learn what FSMs and statecharts are and how they can take your UIs to the next level, with innovative techniques for implementing, testing, and visualizing your app's finite states in a robust, automated way. 

There will plenty of use cases, resources, and real-life examples that work in any framework, or even plain JS.

Reactive State Machines and Statecharts

The main use-case for using dynamic components is when we can decide only in run-time which component is loaded. They’re also the only solution when we want to embed Angular components in non-Angular ones. In many cases, replacing in-template components with dynamic ones is beneficial to performance and code quality. In this talk you'll learn how to create and use dynamic components, and discuss several types of usages.

It’s Alive! Dynamic Components in Angular

With the onset of decentralized networks like Ethereum and IPFS, applications today are at the cusp of becoming truly decentralized. In this talk, we’ll get our hands dirty by digging into the capabilities that modern browsers offer, to explore how we can not only build on these networks, but also create applications whose feature sets can be extended by anybody in the world for truly decentralized user experiences. Primarily, we’ll take a look at the security assumptions, sandboxing, process spawning, and inter-process communication capabilities available to browser applications that allow a user to run (and trust!) 3rd party code, and how we’ve orchestrated these pieces together at Aragon to build an “operating system” for organizations in the browser.

Creating Truly Decentralized Browser Applications

As Unicorn’s CTO, I am responsible for the design and development of the Unicorn Mobile-first IoT-ready Cloud Architecture that all of our most recent products and projects use to deliver end-user functionality to our customers. The key part of the architecture is a React-based frontend library called UU5. Making React Context official in version 16.3 (with new API) we have upgraded several concepts in the library using the new feature - themes, multi-language, SPA layout and components communication. The speech will cover our experience with React Context and will show cases where React Context can help and be more efficient as compared to traditional Redux/MobX state managers.

React Context - Lessons Learned

Check out the world’s award-winning websites—what do they all have in common? Animations! They have elements that move and change. When done well, animations can amaze us. But why are some animations delightful while others are so annoying? The answer could be in how our brain perceives motion. Understanding this could be the key to confidently adding animations to our websites and apps. Animations with code seem hard, but they shouldn’t be. In this talk, I will give some tips and explore some tools to simplify creating animations in React.

Delightful UI Animations by Understanding the Brain

In this talk, Brian and Filip will skip all the theory about reactive extensions (Rx) and dive right into practical use. How can Rx help you with autocomplete? What about when you have several fallback scenarios? What if the state of your app depends on three separate data sources, all asynchronous and live? We’ll be live-coding with Flutter and its handy StreamBuilder widget — but these little patterns are applicable everywhere else.

Practical Rx with Flutter

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 Three.js and React360 to create 3D experiences both for web and VR.

React360 - 2D to 3D

Ask Me Anything session, moderated by Gerard Sans.

AMA with Thomas Roch

AMA with Mark Dalgleish

At ZEIT I'm in charge of the Now CLI, the easiest and simplest way to deploy serverlessly to the cloud. Just execute now against any directory or file in the filesystem, and a deployment is instantly made to our global network.
The main program and its subcommands query our different API endpoints (https://zeit.co/api). For example, when creating a deployment we first upload all its files (File Upload API), followed by deployment creation (Deployment API) and then we ensure it can run for the first time (Instances API).
Errors can occur at any stage of this pipeline: network errors, transient API failures, failed API validations or requirements, rate limiting due to too many requests, among many others.
This talk describes how we modeled our error-handling system for asynchronous operations using Flow, in order to: 
- Provide a scalable system that allows us to grow our API and subcommands as our business quickly evolves 
- Ensure that the developer is aware of the entire error space for each operation they perform by leveraging the type system (e.g.: no unknown exceptions) 
- Provide accurate and easy-to-understand error messages in combination with https://err.sh hyperlinks

Modeling errors in Now CLI

Redux is a predictable state container for JS apps. It helps to achieve consistency by keeping data in a single state, and managing state changes via dispatching actions. The idea itself is great, yet often misunderstood - the necessary code management is interpreted as a boilerplate, and coders seek any library which just helps them write a little less code. Though, most of the libraries/approaches which try to reduce this ‘boilerplate’ seem to miss the point. In this talk, we’ll discuss an approach that introduces some tradeoff, but preserves many of the important guarantees of redux, and also introduces some new nice features with less code. We’ll also talk about how to gradually transition from traditional Redux to this Reduced redux.

Reduced Redux

So you’re building this exciting new web application powered by 'insert your framework of choice'. But when you ship it to your users, you realize that they might have a bad experience loading the app. There are a lot of variables in the mix, from the internet connection to the performance of the device and of course to the browser of choice. The first experience with your application can be crucial in the decision to use your service or not, so better make it right! Performance is not something that you handle reactively after you ship the application, performance should be baked into your software development process and your team should embrace performance optimization techniques as part of their working culture. One of the crucial elements of performance is to ship relevant content to your users as soon as possible. But in modern web applications, figuring out what to ship and what to prioritize can be hard. We will start from understanding how the browser works, then we will explain what the critical rendering path is and how we can optimize it. Expect a talk full of valuable resources and ideas that one can use to improve the performance of a modern web application.

Stay Away From My Path!

Functional composition can help to build flexible and readable APIs. It is a concept that can be translated into a variety of programming languages and domains and is therefore not limited to JavaScript. This talk helps to understand the advantages of functional composition and to explain its underlying ideas. Furthermore, it bridges practical programming concepts such as testing or dependency injection with functional programming concepts such as pure functions or partial application.

Compose All the Things

The promise of GraphQL is clear and compelling: allow your clients to ask for exactly the data they need at exactly the time they need it. Add the fact that you get a strongly-typed API and automatic introspection out-of-the-box and it’s easy to see why so many companies are making the switch to GraphQL.
The default tooling that comes with GraphQL works well for small applications. However, once our apps start to get sizeable, it becomes easy to hit bottlenecks and performance degradations. Fortunately, there are several optimizations we can add without a ton of effort.
In this talk, we’ll look at some of the best bang-for-buck GraphQL optimizations available. We’ll take a deep-dive into query batching to limit server requests. We’ll look at schema stitching to optimize how we call into multiple GraphQL endpoints. We’ll also talk about features offered by Apollo to improve perceived performance such as the optimistic UI pattern. Finally, we’ll look at some of the best ways to profile and monitor your GraphQL API.

Optimizing GraphQL Applications

Writing accessible code is hard, but modern web languages can make it easier, and can save developers from mistakes. We can leverage type safety to prevent inaccessible event listeners on divs, we can avoid the dreaded tpyo. In this talk, we'll delve into accessibility on the web, and how type safety on the frontend can guide towards more accessible code.
We'll explore examples using Elm, a functional, type-safe language that compiles to JavaScript, and the Elm package "accessible-html", a helper library encouraging accessible practices. Elm experience is not necessary!

Typing Towards an Accessible Web

Cypress.io is an open source free end-to-end test runner that runs your web application inside an iframe in a browser it can closely control. This architecture completely changes how your tests behave (hint: no flake), what you can test (pretty much everything), and why you write more e2e tests (because you love writing them). In this talk, I will give a very brief intro into Cypress itself but mostly will concentrate on how it changes the entire testing experience. Cypress users can test web applications by observing just the external behavior (DOM, network calls, storage) or can reach deep inside the application's code, and I will explain the trade-offs. Finally, I will discuss why Cypress tests do not use "async / await" keywords, and instead look like declarative reactive streams.

End-to-end Testing Is Hard - But It Doesn't Have to Be

Our stack at Pilloxa contains shiny things like React Native, ClojureScript and Serverless but also classics like Jetty servers and Postgres databases. In this talk I’ll talk about the technology we’ve used and abstract our learnings into something that could be useful when evaluating tech stack choices in general.

Lessons from Using Bleeding Edge Tech in a Startup

Stardust is open source project on GitHub that's derived from the popular Semantic UI library, currently implemented in React.
It provides excellent accessibility (high contrast themes, keyboard navigation, tested screen reader support), advanced component styling options (css in js) and component state management.
If you need pixel perfect, accessible and consistent web design Stardust could be the right choice for you.

Introducing Stardust

Are you a fan of comics or have you ever dreamed of becoming a comic artist yourself? Then this talk is just for you.
In this talk we will see how both recent and matured Web APIs, including CSS3 and the Web Animations API can be leveraged to tell our own, rich and interactive stories on the web. We’ll take a look on how we can use Ember.js to help us create an online comic book that makes any comic art fan’s heart leap for joy.

Crafting Web Comics with Ember

Apple offers the KVO (Key-Value-Observation) framework as a way to make apps reactive to model property changes, but this technology is far from comprehensive enough to serve all of the needs of a modern application developer. We'll discuss how using Realm for iOS gives us the benefits of a truly reactive paradigm in mobile development and allows us to decouple our application logic from our API layer, creating a much cleaner application architecture that lends itself to more seamless on/offline experiences.

Reactive iOS App Development

Asynchronous processes in Javascript are hard. Not just hard to write, but especially hard to reason about. Will things happen in the order we intended? Complexity caused by async exists in all programming languages. In multi-threaded environments like Erlang and Java there is an elegant approach to manage the complexity caused by async: Actor model. In this talk we will see how Actor Model can be applied to Javascript. It does not just result in simpler code, but also in a conceptual model of processes that is much easier to reason about. We compiled our experience into our own library: Actrix.
We will show how the Actor model solve async problem in a very elegant way by exchanging messages between actors. We will dive into several different actor patterns, like bindings between the actors world and the UI, optimizations by skipping messages, or even cancelling async operations.
The Actrix library bring much more to the table: uniform communication method for local and remote actors. It also does not force developers to write actor in a peculiar way, allowing standard OO pattern like inheritance or composition to be applied. Not to mention type safety with TypeScript so that errors can be identified faster and developers will have full support on their IDE for feature like auto-completion and such.

Actor Model in Javascript

Your app is bigger and slower than it needs to be. Without rewriting app code we can squeeze more performance out of your code by tweaking Webpack and Babel. These tools are immensely powerful but it’s a delicate dance to get them to play nice. This talk is full of tips and tricks to get you there.

10KB or Bust: The Delicate Power of Webpack and Babel

While the React community has largely agreed on abstracting complex app state away from the components, it is often a different story when it comes to remote data-fetching. On one side stand the many incarnations of the "fetch on didMount, show placeholder while isLoading" pattern, on the other you have frameworks like Apollo and Falcor - great in their own right, but what if we can't (or even don't want to) use them on a particular project ?
We'll be showing a small and self-contained data provider library - using higher-order React components and Redux on client side, and requiring zero changes to you backend. We'll also keep our components from worrying about how and when the fetching happens - defining instead only what data is required, while abstracting all of the race-conditions and caching via a single HOC, handling the hard parts.

Convenient Data Fetching with Higher Order Components

Types can be invaluable when working on a large project, by making refactoring less error-prone, enabling better coordinating between teammates, and improving readability. Reason gives you a powerful, battle-tested type system with cross-file inference, macros, and excellent JavaScript interop. Come learn what differentiates it from added-on type systems like Flow and TypeScript, what it looks like to build React UIs in Reason, and what makes it easy to start into and integrate with your current JavaScript app.

Type-safe React with ReasonML

Panel discussion moderated by Gerard Sans.

State of the Art: Web Platform

The world is an uncertain place. If we write programs that interact with the outside world—sometimes known as useful programs—we must acknowledge the possibility of failure. Every time we request a resource over the network, parse user input, or consume the output of another program, it's possible that the operation will not succeed. Imperative languages give us a few options in such cases: raising an exception, returning an error code, or succeeding with a bogus value such as NaN.
Algebraic data types such as Maybe, Either, and Future allow us to deal with uncertainty in a principled, unified manner: no more conditional logic; no more exceptions. Instead, we get simple building blocks that snap together. In conjunction with map and flat-map, algebraic data types allow us to collapse multiple sources of uncertainty into a single success or failure value. The decision about what to do in the case of an error is left to the caller, allowing the same error to be handled differently in different contexts.
JavaScript is not typically considered a functional language, but it is possible to define and use algebraic data types in JavaScript. This presentation will introduce the Maybe type in a JavaScript setting, and show how it can be used to write code that is dramatically simpler than the equivalent imperative code. The concepts learned during the presentation will be directly applicable to true functional languages such as Haskell.

Programming Safely in an Uncertain World

Lightning Talks - Day 2

Help Your Computer Help You

AMA with Alex Matchneer

Ask Me Anything session, moderated by Gerard Sans. Based on Igor's and Shmuela's previous talk.

AMA with Igor Minar & Shmuela Jacobs

Ask Me Anything session, moderated by Gerard Sans. Based on Jared's previous talk.

AMA with Jared Forsyth

Ask Me Anything session, moderated by Gerard Sans. Based on Brian & Filip's previous talk.

AMA with Brian Egan & Filip Hracek

Ask Me Anything session, moderated by Gerard Sans. Based on Michel's previous talk.

AMA with Michel Weststrate

Day #1 wrap up

Day #2 wrap up

Ask Me Anything session, moderated by Gerard Sans. Based on Mark's previous talk.

Inspirational stories

Composition over inheritance is one of the recommended patterns in OOP and in functional programming is just how things work by default. So when using React we work by composing components together to build a whole App and the more we can extract common behavior the more re-usable our code is, this is where Higher Order Components come into play. We’ll quickly cover some of its basics and benefits of Higher Order Components and then jump into how we can type them with Flow for better developer experience.

Typed HOCs with Flow

With more and more complex and bigger web applications, handling the state of these applications can become a challenge for it self. We want to talk to you about how to best approach State-Management in your Applications. Compare some of the different solutions with each other and figure out the pros and cons, helping you make a decision on which one to pick for which project and why we chose Redux for our Application.
To get a better insight into the implementation side of getting a large scale application State-Management up and running, we will show of performance problems that might occur and how we solved them. How to structure your store in redux, thoughts that should go into that before implementing one and why normalization of different data sources can save you a lot of hustle and debugging down the road.

Make React State-Management great again

Why is so hard to create and maintain web and how we can fix it.

Editable Web

We’ve all mastered regular expressions at some point in our career. What if I told you there was another level beyond RegExp that many of the tools we use today are built on? For example, eslint, babel, prettier, and webpack (and that’s just to name a few!) Come join the wonderful world of AST transformation — your best friend for linting, refactoring, and beyond!

They see me refactorin'. They hatin'

How we rewrote a website with 50 million page views and more than a million monthly users. From legacy technologies to modern JS application. We are going to speak about significant infrastructure and React challenges like
- serverless
- optimizations & caching
- fallbacks if something goes wrong
- React error handling
- adverts in React
- server side vs client side rendering
Some SRE tricks and cost-saving magic included!

From PHP and on-prem servers to NodeJS/React and AWS

About two years ago, Skype embarked on a journey to redefine how client applications are built with a bold goal: to have a single code base for all platforms where Skype is available – Android, iOS, Windows, macOS, Linux and Web, while keeping app performance at a reasonable level. Technology choices have been made: TypeScript for business logic wherever possible, React for UI, React Native for mobile, Electron for desktop. I’m going to talk about how this setup has been working for us so far and how it has evolved since (ever wanted React Native on desktop?). I’m also going to talk about how we adopted DevOps in somewhat non-traditional way for mobile and desktop applications.

Quest for the Holy Grail of Cross-Platform Client Development

One keeps thinking how some hotels can still run on DOS-based systems and spend hours on meaningless rituals preventing them from focusing on their guests. Vojta will tell you a story about how at Mews through technology they are enabling great service and improving guest experience.

Building the frontend of hospitality's future

How the biggest challenges look like, when you decide to write applications for televisions, the environment without any cursors or touch screens and how to solve it with React and React-Native. Because at the end of the day, you want with one code to support all platforms like Apple TV, Android TV, Smart TV from LG or Samsung and much more…

ReactiveConf 2018

Oct 29 - Oct 31 | Prague, Czech Republic