Agenda | ReactiveConf2018

Talks & Workshops

What is coming

Wondering what topics can you expect at ReactiveConf this year? All information about this year’s talks and workshops can be found here. Stay tuned for more!

Talks

Robin Frischmann
Reausability: Sharing Components
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.
Michel Weststrate
State management beyond the libraries
Many battles have been fought over what is the best way to do state management. A gazillion of strategies and libraries are out there. So,.. it is time to take one step back. Why is state management relevant in the first place? What problems does it solve? For example, many debates are about mutability or immutability. But the I'll propose that the more fundamental question to ask is: identities or values? With these concepts in mind we will take a look at several libraries and frameworks and recognize the patterns. We will take a look at the advantages and disadvantages o different approaches. Finally I'll show that those concepts are even highly interchangeable with a PoC that will blow your mind. My goals is to enable you to reason about state on a far more fundamental level. Resulting in better system design and earlier recognition of bugs.
Alex Matchneer
Building for Realtime: Best Practices for Architecting Server-Driven Web/Mobile Apps
I build/maintain 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 I'd like to present on the current state of design patterns and best practices to facilitate building such an app. I'd touch on [Uber's open-sourced RIBs architecture](https://github.com/uber/RIBs), as well as what we've built in Ember to make it easier to build these kinds of apps. I believe 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 :).
Jared Forsyth
Type-safe React with ReasonML
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.
Brian Holt
10KB or Bust: The Delicate Power of Webpack and Babel
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.
Shmuela Jacobs
It’s Alive! Dynamic Components in Angular
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 we’ll learn how to create and use dynamic components, and discuss several types of usages.
Mark Dalgleish
Sketching in the Browser
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, we'll begin to answer these questions by running through a real-world example of this technique, having a closer look at how it all works, and showing you how you can start experimenting with this yourself.
Alex Moldovan
Stay away from my path!
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.
Ryan Chenkie
Optimizing GraphQL Applications
"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."
Jessica Jordan
Crafting Web Comics with Ember
"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."
Rinat Abdullin
FoundationDB - reliable database constructor
FoundationDB is a distributed scalable transactional (ACID) key-value database with crazy thorough testing. It is so good that three years ago the entire company was bought by the Apple and went dark. Three years ago it became an open source project for the benefit of the community. The talk is based on the experience of (happily) running FoundationDB in production at SkuVault for some time before it was open sourced. We'll cover the story of building upon the FoundationDB to construct a reliable multi-model database in an unreliable cloud environment. This performant self-healing cluster hosted diverse layers: queues, document store, pub/sub system and an event store. The talk also explores the design principles that made this database such a unique piece of engineering: thorough testing through the deterministic simulation with fault injection.
Tessa Kelly
Typing Towards an Accessible Web
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 `div`s, 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!
Brian Egan, Filip Hracek
Reactive Flutter Apps with RxDart
Interested in Flutter, but unsure how to structure Flutter apps? If so, join along as we explore how to architect apps using using Dart Streams! We'll cover the basics of Streams, how to beef up their power with RxDart, and how to create a Reactive Application with these patterns. This talk will cover the Bloc pattern introduced by Google. It helps layer your apps, allowing you to write business logic that works across three platforms: iOS, Android, and web. Come learn a bit more about Flutter and the architecture patterns that can help give your apps a testable, reusable, and cohesive structure
David Chambers
Programming Safely in an Uncertain World
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.
Necoline Hubner
IIncreasing User Access through Service Workers
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.
Ohans Emmanuel
A Comic Strip on Every ReactJS Update Since v16+
In this talk, unlike any you have come across before, I will deliver funny, unfeigned and dead serious comic strips about every React 16+ updates, and the buzz around them. It’ll be extremely amusing, either purposely or not, easy on beginners as well as professionals, and will be very informative as a whole. Currently at v16.4, and with more news on the much waited async rendering, there’ll be a lot of informative comic strips to be delivered!
Anna Doubková
Going Native
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.
Shay Keinan
ReactVR and WebGL
The history of virtual reality, basic concepts, what's new in 2018, introduction to ReactVR, advanced Three.js.
Thomas Sojka
Compose all the things
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.
Ismail Muhammad
Actor Model in Javascript
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 an 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.
Max Millington
A Reappreciation of Redux: Why my team at PayPal removed ApolloClient and went back to Redux
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. My team at PayPal has been excitedly using GraphQL in many of our new apps. We love the idea of a single endpoint providing frontend developers access to the great multitude of PayPal services. In our excitement for GraphQL, we also implemented Apollo Client and React Apollo into our app. After all, the boilerplate and heavy weight of Redux has been much maligned, and we 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, we soon realized that we 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 we had failed in our original estimation to fully appreciate what Redux gave our app that Apollo Client simply does not. This talk will explore why we initially were so excited about Apollo Client and why it was our 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.
Boris Dinkevich
Talking with Ethereum smart contracts from the browser" / "Ethereum dApps & React
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.
Thomas Roch
Be more functional and reactive in React
Components with an 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.
Bruno Lourenço
Delightful UI animations by understanding the brain
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.
David Khourshid
Reactive State Machines and Statecharts
"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."
David Kimr
React Context - Lessons Learned
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 speach 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.
Gleb Bahmutov
End-to-end testing is hard - but it doesn't have to be
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.
Alex Matchneer
Ask Me Anything Session
Igor Minar, Shmuela Jacobs
Ask Me Anything Session
If you have any questions for Igor or Shmuela regarding their talks or anything else, this it the right time to ask!
Rinat Abdullin
Ask Me Anything Session
Michel Weststrate
Ask Me Anything Session
Brian Egan, Filip Hracek
Ask Me Anything Session
Jared Forsyth
Ask Me Anything Session
...more comming soon

Workshops

Tessa Kelly
Introduction to Elm
Barry Boubacar Siddighi, Victor Bury
GraphQL with react vs. Angular vs. Vue
Filip Hracek, Brian Egan
 Codelab: Build your first Flutter app
Roman Liutikov
Introduction to ClojureScript
Victor Bury, Barry Boubacar Siddighi
Vue.js
Alex Moldovan
Evolving Patterns in React
Showmax
Building type-safe applications with Flow and GraphQL
Sean Grove
Reason DOJO
Milan Lepik, Jan Vlnas
Simplify your data processing with BakeryJS
Michal Gregor, Martin Farkaš
Service Workers at Your Service
...more comming soon