Deep-dive into the future of development. Stay ahead of the curve.

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.

ReactiveConf

This talk shows how quick and simple it can be to write end-to-end tests for web applications – if your testing tools are not fighting you all the time. I will go over writing E2E tests using Cypress.io, controlling the network during tests, using visual testing and setting up continuous integration to perform E2E tests on each commit.

Cypress.io – the State of the Art End-to-end Testing Tool

The monorepo odyssey

Giant cows, flying rabbits, and the moon — Humor and the unexpected as tools for productivity

Distributed markdown apps

The future is now. Or then. Or it will be soon be now, but now is then.

JavaScript and its ecosystem is ever evolving and JS fatigue can be real. It’s a lot to keep up with. Staying up to date on the ever moving system feels like a fool’s errand and to some degree it can be.

But in this talk we’re going to chat about a few things:

– what’s new and important now with ES2018, ES2019 and beyond
– what’s new and important in the JavaScript ecosystem and tooling
– how to sanely integrate new features, tools, and such into your existing codebase today.
– how to get the most of using VSCode with futurist code

Come chat about the future and how to touch it today.

Futurist Code Bases: Integrating JS of the Future Today

Typescript is in full hype mode right now. Twitter gives us a new hot take daily, but most of us haven’t seen the long term benefits. Dropbox switched to Typescript in 2015 and we’ve seen the good, the bad, and the ugly. 

In this talk we’ll take a step back from the hype and cover what we’ve learned over the past four years. We’ll discuss how static typing has helped us scale a codebase, and when it’s worth it just to write an any and move on with your life.

TypeScript: Seeing Past the Hype

Unlim.io

Progressive web apps can be difficult to support, hard to test, and _unfortunate_ to maintain. With Expo for web you can maximize code sharing between your native and web apps. The robust set of Unimodules provides you with unified APIs for things like camera, gestures, image picker, persistent storage, and more. 

Optimized for performance, Expo’s Babel preset enables you to do advanced tree-shaking which removes all unused platform code. New universal testing libraries make it easy to ensure your app is running as expected on all platforms. 

Expo web also provides a set of Webpack plugins for adding offline support and automatic generation of PWA assets. 

I’ll be discussing this, and possibly some future plans for supporting things like universal navigation, SSR, and connected applications with things like apple site association.

Expo for Web

How can we extract the most value from our front-end JavaScript errors, especially when users often don’t report them?

We’ll learn about the evolution of the browser’s global error event handler and how to work around its limitations — cross-browser idiosyncrasies, stack traces as unwieldy strings, minified code, and other fun stuff that we really look forward to dealing with! We’ll also look at libraries to make JavaScript stack traces more useful, along with other techniques for making our bugs a little less buggy.

Kicking Bugs and Logging Names: Errors in JavaScript Error Reporting

Are we there yet? Remix

Tech companies of all sizes have dropped the ball when it comes to the privacy of their users. Many users find themselves asking, “How could this breach have happened?” and “What happened to my data?”. Surprisingly, many of these large-scale data breaches have been 100% preventable. 

I’d like to walk through the pitfalls of some of the largest data breaches of the past few years, what we’ve learned from them and how engineering teams can avoid them going forward.

Learning from High Profile Failures

Can React and web technologies compete with native toolkits when it comes to making super complex, rich desktop apps? Can we go further and create better-than-native applications?? Sounds like a good challenge

This talk introduces how React, JavaScript and WebAssembly can be used to write new ambitious apps, or port existing ones – with the real-world example of my open-source game development software. I’ll show how to leverage the React ecosystem to create performant applications: architecture, patterns, typing, useful open-source modules… and how to go one step further and provide a better user experience as well as a better developer experience.

These apps are not web apps, they are not native apps, they are hybrid “Native Web Apps” and can provide the best of both worlds.

Native Web Apps: React and WebAssembly to Rewrite Native Apps

Real-time & Offline-ready Serverless GraphQL with AppSync

Building your own real-world, secure & scalable GraphQL API is a lot of work. With AppSync, robust GraphQL APIs including schema, resolvers, and data sources are created & configured automatically and instantly through either the AWS Amplify CLI or the AppSync console, abstracting away much of the complexity traditionally involved with setting up a new GraphQL backend.

In this talk, I’ll demonstrate and discuss the more interesting and powerful functionality that AppSync offers and do so in a way that developers will walk away with a confident understanding of how AppSync works and can be extended to help them in their day to day.

We’ll also create a real AppSync API & connect to a React application in a demo to demonstrate what we discussed in the talk in a live coding exercise, showing how to create queries, mutations & subscriptions directly from a client-side application.

Full Stack Development in the Era of Serverless Computing

Electron is one of the most popular platforms today for building cross-platform desktop applications. We shipped v1 of our code editor, Onivim, using Electron, and while it was wonderful to leverage web technologies and frameworks like ReactJS, we faced numerous performance challenges.

In order to meet our performance goals, we decided to re-architect and move to a native solution based on ReasonML. In the process, we built a new desktop application framework called Revery, which lets us enjoy the ReactJS & Redux style of development… but with native code performance! This move has drastically improved our startup time, responsiveness, and memory usage. In addition, we’ve been able to take a new approach to our core architecture – leveraging functional programming principles.

We’ll discuss our journey of shipping a cross-platform desktop app with this new technology stack, and share our successes and challenges in migrating from TypeScript/React/Electron to ReasonML/Revery for Onivim v2.

Onivim 2: Re-Architecting for Performance

Vue.js 3 is just around the corner and along with many exciting improvements it introduces a new, function-based API to design components, called Composition API.

In this talk, the attendees will get an overview of the new Composition API and learn how they can use it to improve code quality and reusability.

Motivation for Composition API:
We all love how Vue is very easy to pick up and makes building small to medium scale applications a breeze. But today as Vue’s adoption grows, many users are also using Vue to build large scale projects – ones that are iterated on and maintained over a long timeframe, by a team of multiple developers. Over the years we have witnessed some of these projects run into the limits of the programming model entailed by Vue’s current API. The problems can be summarized into two categories:

The code of complex components become harder to reason about as features grow over time. This happens particularly when developers are reading code they did not write themselves. The root cause is that Vue’s existing API forces code organization by options, but in some cases it makes more sense to organize code by logical concerns.
Lack of a clean and cost-free mechanism for extracting and reusing logic between multiple components.

The APIs proposed in this RFC provide the users with more flexibility when organizing component code. Instead of being forced to always organize code by options, code can now be organized as functions each dealing with a specific feature. The APIs also make it more straightforward to extract and reuse logic between components, or even outside components. We will show how these goals are achieved in the Detailed Design (https://vue-composition-api-rfc.netlify.com/#detailed-design) section.

You can find the details for composition api in the RFC page (https://vue-composition-api-rfc.netlify.com/#summary).

Vue 3 and Composition API

Remember loving to read comics on a Sunday afternoon when you were a kid? Maybe you don’t. In the past, traditional print comics have made it impossible for blind and visually-impaired readers to experience their heroes’ adventures first-hand. Today an increasing number of initiatives like comic book stores for the blind aim to overcome this challenge.

What if I told you that the web platform empowers us to even create comics for literally everyone?

Alongside a demo application, you see how accessibility best practices enable you to craft an immersive webcomic experience that is not only engaging for the sighted but accessible for everyone.

Crafting Comics for Literally Everyone

PWA vs Native

When you’re building a component library or a design system, you’d want to visualize how the growing number of components look in their different states and variations. One way to achieve this would be writing every possible variation of the component by hand. This is a manual process, harder to maintain and means a lot of lines of code. 

What do we all have in common as developers? We hate all those 3 things.

In this talk, you’ll find out how you can automate your component variation rendering process and improve your workflow by applying the Cartesian Component concept. The code will be presented in React but the concept is applicable to the components written in other frameworks as well

How a 16th Century French Mathematician Helped Build a Design System

Amr gives an excellent talk on privilege, diversity, and inclusivity. He adds the missing context to these terms, and shows how they can impact our products from a pragmatic perspective.

Belonging to an underrepresented group in the European tech scene myself, I most of the times struggle with colleagues who undervalue the principles of diversity and empathy.

I realised that these topics are rarely debated within the tech scene logically and pragmatically without pointing fingers.

Do you believe political correctness and empathy are buzzwords that limit the society rather than contribute to its advancement? Do you think talking about topics like diversity quotas, privilege doesn’t make much sense and you would rather spend this time talking about the latest in technology?

In this talk I would like to take the chance to try and add the missing contexts to such terms and arguments, moreover, I will try to go through various examples on how it can impact your product from a very pragmatic prospective.

Privilege as a Technical Debt

All our software is a bundle of decisions. But despite the fact that some decisions can have a long-lasting, crippling effect on our app, we make most of them based on guesses.

But what if the best decision is indecision? What if you could postpone most of your decision until you gather enough facts in order to make the optimal one?

In this talk, we will learn why deferring decisions can result in a much better, simpler code base. We’ll see examples of decisions we think we have to take on day 1 of the project, yet, can (and should) be postponed and see how practices like Spikes and the right design of your application will allow that to happen.

Indecisions Are Not All Bad

Sean gives an amazing overview of Rust, for JS developers.

Thanks to wasm, Rust can reach the platform with the largest reach: the browser. We’ll take a look at how thanks to the impressive language design, thoughtful compiler error messages, and great documentation, JavaScripters can unlock high-performance concurrency and graphics thanks to Rust. 

We’ll step through Rust/wasm/JS interop, see what it’s like to get a reference to a canvas instance, to communicate with services workers, and to pass data between all the pieces involved. We’ll take a look at what’s enabled, as well as pitfalls around the data boundaries involved, and the size of the final payload, so that it’s clear where the cost of introducing Rust is outweighed by its benefits. 

Finally, we’ll speculate on how the web may develop, with a Rust-core/JavaScript-surface design, combining high performance, safety, while maintaining ease-of-use.

Rust in the Browser for Javascripters: New Frontiers, New Possibilities

As GraphQL moves into the mainstream, the tooling & ecosystem has grown and has made it possible to do much more with GraphQL than using it as just a data layer. In this talk, I’ll show how developers are using GraphQL as an API gateway to accomplish things that you may have never thought possible.

More details:

When we think of GraphQL at the resolver level, we typically associate some type of database as the resolver data source, but in practice a resolver is simply a function. What this means is that we can do much more with our GraphQL APIs & our resolvers than we ever thought possible, including things like taking existing REST APIs & transforming them into GraphQL APIs (http resolvers), passing the query to Lambda or serverless functions for processing & returning the response via a GraphQL query (for things like AI & ML), geospatial & time-based queries (passing the query to Elasticsearch), & even VR & AR apps (passing in user location / app info & using the subscription to transmit image assets). 

In this talk, I’ll walk through what this looks like in theory & in practice, demoing 4 different applications that implement this functionality & showing the code that make the magic happen.

Curious Use Cases of GraphQL

Nuxt.js is a framework based on Vue.js giving you all the tools to create any kind of applications (Universal, SPA and Statically Generated) while keeping performances and best practices at the top. 

Sebastien will demonstrate how to create a web application quickly by using Nuxt.js and explaining how it works under the hood. Giving you confidence for your next Vue applications.

Be Lazy, Be Smart, Be Nuxt

We all love our privacy as we should. Web and web monetization, today, however, works differently and is reliant on tracking our activities exposing us to the web. 

Almost all publishers and content creators rely on advertising to monetize their content which inherently relies on tracking to allow them to continue to survive. To allow the web to deliver monetization for Publishers and content creators while keeping users private, we created Brave Rewards. 

In this talk, Nejc will provide a vision for what a new, private web looks like and how everyone can join in and contribute to the future of the private web together.

Brave Rewards, a New Way to Think About the Web

Day #1 wrap up

Backpressure—resistance opposing the desired flow of data through software—from massive scale, to death by a thousand cuts, it’s something nearly every software engineer will have to deal with at some point on the client and server. 

For some, it’s a frequent problem. But the term itself isn’t nearly as understood and recognized. 

In this talk, we’ll discover what backpressure really is, when it happens, and the strategies you can apply to deal with it.

Backpressure: Resistance is NOT Futile

As technology advances and the applications we build become more complex, the tools that we use to secure the data shared within these products need to follow suit. We need to ensure that we deliver a high standard of protection to users, allowing them them to seamlessly use the product without thinking about security or any potential threat. Even just a thought of any risk could lose us our customers’ trust and therefore millions in investment and in turn threaten our entire business as a whole (including our jobs).

A security breach is a very real problem, both personally as an individual and professionally in a business sense. But we as developers can help fix this problem. In very recent years there has been a number of incidents involving npm dependencies pushing vulnerabilities to consumers or exposing data. This led to the npm team purchasing a security tool to prevent future incidents. These incidents can easily be stopped and further prevented from happening again. NPM is the first main carrier of personal information and it, therefore, should be where we start to repair these issues.

In this talk, we will look back on the previous incidents and do a postmortem investigation on what happened, and how it could have been prevented. We will then take a further look into tools and products that can help protect our applications going forward and some basic best security practices that we all should follow, no matter our application.

Protecting your npm Dependencies

Open-source modules on the NPM ecosystem are undoubtedly awesome. However, they also represent an undeniable and massive risk. You’re introducing someone else’s code into your system, often with little or no scrutiny. 

The wrong package can introduce severe vulnerabilities into your application, exposing your application and your user’s data. 

This talk will use a sample application, Goof, which uses various vulnerable dependencies, which we will exploit as an attacker would. For each issue, we’ll explain why it happened, show its impact, and – most importantly – see how to avoid or fix it.

StrangerDanger: Finding Security Vulnerabilities Before They Find You

How does PWA concept play with YOUR favorite framework? React, Angular, Vue, #FrameworkOfTheWeek? In my technical session, we’ll check what major frameworks creators prepared for us regarding scaffolding / adding PWA features (spoiler: only basic features), and switch to Workbox. 

We’ll see that Workbox is a library providing many sophisticated service worker features in a simple, developer-friendly form. Also, we’ll talk about another advantage of Workbox – the flexibility: you build your own service worker and automate some tasks using this library. 

As the outcome, you’ll be ready to make a production-ready PWA from the app built on any framework.

Many Frameworks – One PWA Solution

The next billion users face environmental factors that are vastly different to most developers.

This talk will take a fresh approach to address the needs of users in remote or austere environments by building on top of current PWA standards for a web resilient web experience.

Resiliency and PWAs

Butter-smooth animations

“Breaking Out of Box” or Writing a Wasm-based Gameboy Emulator in Rust for Frontend-Developers

Everyone wants to put us in a box, but today we’re going to break out – no webpack, no v8, none of the dizzying 1,000 levels of magic and abstraction that we alternatively enjoy and wrestle with day to day. Instead, we’ll take a journey to simpler times with a gameboy emulator, where every line of code we write maps to an exact cycle count on a known CPU.

We’ll simultaneously learn about this newfangled language called “Rust,” and how it allows us to express the low-level designs of this ancient CPU while sussing out high-level, zero-cost abstractions for our modern code. We’ll compile a web-assembly (“wasm”) binary to run in the browser to explore interop between Rust, wasm, and JavaScript, and see what a full toolchain looks like.

Finally, our journey near its end, we’ll reflect on why we would care about stories about low-level CPU programming; what we lose and gain from JavaScript’s wonderful abstractions, and most importantly, what it all means to us as engineers.

“Breaking Out of Box” or Writing a Wasm-based Gameboy Emulator in Rust for Frontend-Developers

GraphQL has exploded in popularity since its public launch in 2015, and PostgreSQL is still going strong after 20 years of development, gaining market share and impressive features at an ever-increasing rate. These tools can pair beautifully, in particular, because they’re both strongly typed and declarative. 

In this talk, we’ll learn how combining these two technologies can lead to massively increased software development and delivery speed, faster APIs, fewer bugs, and ultimately enable you to focus on delivering value on the frontend rather than maintaining three different layers of data models and associated logic on the backend (DB, application, API).

Increasing Velocity with GraphQL and PostgreSQL

We all love the modern JavaScript stack, but why does it sometimes feel like it takes us weeks to achieve what Rails developers can do in one afternoon? 

In this talk, I’ll use my own experience building Vulcan.js –a full-stack GraphQL JavaScript framework– to explore what a modern “Rails for JavaScript” would look like, and seek out the path to reclaiming our lost productivity.

Vulcan.js: Building the “Rails for JavaScript”

Vue composition API

The Expedition

Lightning Talk

What if it was possible to build backend features for our react apps in the same way that we use redux in our react apps? 

In this live-coding demo, I will show you how we’ll add backend business logic using the redux abstractions of dispatching actions, writing reducers as pure functions and subscribing to updated state. 

Our backend will be completely serverless and using open-source and managed services so that we’re not actually deploying and maintaining any servers. We will use GraphQL mutations from our react app to dispatch actions. These will trigger serverless functions which are pure and return the modified state, which will be persisted safely on a cloud-managed database. 

Portions of your app that are subscribed to the state using GraphQL subscriptions (live-queries) will automatically update! 

You will witness the raw awesomeness of being able to use javascript and graphql in a pattern that you are comfortable with to build backend features from scratch.

Live-coding demo – Build your own backend in the `redux` style with GraphQL mutations (dispatch), `pure` serverless functions (reducers), and GraphQL subscriptions (updated state)

You know that fear. The fear of changing something in your CSS. Deleting a CSS rule is a lesson in getting yourself to calm down, telling yourself that it’s OK, you are absolutely _sure_ that deleting that rule won’t change anything.

And only manual testing can assuage that fear. And yet, even then, you’re still frightened that you haven’t checked _everything_, and that you missed something. Not to mention that it’s amazingly boring.

Never fear again! Testing your CSS code, testing the _visual_ aspects of your code, is now possible, and I will show how. A slew of new Saas tools have come to the forefront which enable us to write tests that check that everything is the same that it was (even if we moved from BEM to CSS-in-JS).

So grab that keyboard, refactor your CSS, because writing tests for it is now possible!

Don’t Believe the Rumors: Writing Tests for CSS is Possible

Why is the financial services industry struggling to embrace fintech?

Welcome to Global Tribal Banking

The Web has changed a lot since its beginning as a platform for static articles. At first, Web applications did not exist. Then they began to appear in the form of servers generating HTML on the fly. PHP was huge, then fell by the wayside as JS rose. Flash came and went. Today, the Web has become the biggest application delivery platform in history and based on its past, the one thing we can be certain of is that more changes are yet to come.

What, specifically, might those changes be? What differences might the Web of 2020 have to the the Web of 2019? What about the Web of 2025? What would the impact be on Web developers? In this talk, Richard draws on his 12 years of professional Web development experience, and history of being an early adopter of technologies like React in 2013 and Elm in 2014, to make and justify some concrete predictions about the future of the Web in both 2020 and 2025.

Predicting the Future of the Web

Day #2 wrap up

The web & mobile ecosystem is huge and diverse. New and amazing ideas emerge non stop. When this conference finishes you will have heard a lot of new exciting ideas, tools, and projects. 

What are the things that you should start learning now to stay tech relevant tomorrow? One thing is for sure, you can’t master them all.

How to Stay Tech Relevant

This talk is the inception of debugging the Firefox devtools’ debugger which is built using React and Redux. All of us love to ‘console’ log our code, but there are other effective techniques that will help accelerate the debug loop cycle. 

In this talk, I will present the various available browser devtools debugging techniques using practical examples from the community to debug the development of the debugger project!

Debugging the Debugger

5 steps to avoid lawyers in digital business

- JS – what is good, what is bad – a brief overview of when JS shows himself on the good side and when on the bad side
- Comparison of type systems. Dynamic weak versus static strong
- ReasonML what is it?
- The main benefits that you can get when using RML
- Syntax examples
- Types
- Type inference
- A general overview of the workflow
- BuckleScript
- Work with third-party code, package managers
- How can we use JS in RML
- Editors support

Reasonable Reasons for ReasonML

How can you make sure that your web app performance stays high? Google Analytics and measuring loading times will no longer cut it in the single-page apps world. What defines performance from the user perspective anyway?

In this talk we’ll go through the thought process of performance monitoring in production (and if it’s even a good idea), see what we can measure, what React has to offer, and how to integrate all parts into a solution that automatically reports performance issues to developers.

Profiling React Web Apps in Production

Through a series of animated demos and funny failed experiments, join me on my journey towards building a musical game where the controller is a digital piano!

Highlights include:

– Using the Web MIDI API with Elm via JavaScript interop to get input from a digital piano directly in the web browser
– Exploring SVG animations in the Elm ecosystem
– Elm’s best features from the perspective of a beginner who recently fell in love with the language
– Silly and instructive beginner mistakes (how not to use Elm!)

Building my first Elm app was a two-for-one deal: learn functional programming and learn to sight-read sheet music! By the end of this talk, I hope you’ll be equally excited to combine these web technologies in your own creative adventures.

Building a Music Learning Game with Elm, Web MIDI, and SVG Animation

Is it possible to write one application for all possible platforms and devices? How to design such architecture of your application which will allow you to share components, application logic and even more? 

We will speak about how to create and manage this kind of project, what are the pros and cons and how you will save valuable time. In the end, your application can share code between mobile, web and even television platforms!

React Everywhere

Mobile web apps have long been considered inferior to native mobile apps. Mark Zuckerberg’s assertion in 2012 that use of HTML5 in the Facebook app was “the biggest mistake we made as a company” and similar statements have reinforced the idea that mobile web apps are too slow and clunky to provide a satisfying user experience. 

To a large extent, these attitudes are now outdated. Mobile devices have made incredible improvements in performance, access to native hardware and many other areas over the past few years. 

In this talk, we examine in detail the reasons for negative attitudes about mobile web apps among developers. We then ask whether these attitudes still make sense today. 

We also discuss the role of Progressive Web Apps (PWAs) and how newer frameworks like React Native should influence developers’ decisions about which route to take when developing a modern mobile app.

What’s Wrong with Mobile Apps Anyway

The frontend platform team at productboard is responsible for facilitating discussions about the future of the frontend stack, maintaining long term technical roadmap and improving the productivity of front-end engineers. 

In this talk, we will discuss arguments for frontend platform teams and look at potential caveats of platform teams and how to overcome them.

Establishing Platform Teams to Utilize the Economy of Scale

The new way of coding React components using a pure functional style. The speech compares the coding style of React components using 1) Javascript classes and 2) pure functional style with hooks. 

Some advanced concepts of using custom hooks and developer and code performance are presented. 

The speech is for React practitioners (i.e hardcore ? ).

React Custom Hooks

Making a New ContentEditable Editor

The choice of the technical stack is very important, isn’t it? Libraries, frameworks, languages, all of these things can help a product to develop, but can also lead to a catastrophic collapse.

Five years ago, at Wrike, we chose Dart as the main language for frontend development. Since then, we have written more than a million and a half lines of code and our R&D team has grown almost tenfold. But we never thought that choosing one single language could lead to such consequences!

The story about how we chose a language and where we were wrong (and where we were right) and why your choice can cost you so much.

Butterfly Effect: the Story about One Technical Decision

Thanks to modern component-oriented architectures, the front-end community has been naturally gravitating towards design systems as a way of standardising our respective design languages into reusable components. 

When done successfully, it suddenly becomes trivial to translate standard designs into code. In fact, we may even find that this translation step starts to feel somewhat redundant. 

In a world of components, how should our design processes change? How should our tooling change? How should we, as front-end developers, better enable this change? 

In this talk, we’ll look at the current state of design and development, and where we could go – if we’re willing to push for it.

Rethinking Design Practices

What if you could predict user behavior with smart UIs? 

In this talk, we will explore how we can make adaptive and intelligent user interfaces that learn from how individual users use your apps, and personalize the interface and features just for them, in real-time. 

With probability-driven statecharts, decision trees, reinforcement learning and more, UIs can be developed in such a way that it automatically adapts to the user’s behavior

Mind-Reading with Intelligent & Adaptive UIs

Performance has many faces, and one of those is TTI which is the time your users
have to wait before being able to use your app, we’ll explore a few techniques we could use to reduce that time gap to make your users happier and ultimately making your app more successful.

Optimising React’s TTI

As our company and (especially) tech teams grow, our need for better deployment processes increases too. We started with tedious, manual tasks and through a process of continuous improvement over the course of the past 6 years, reached full automation. 

This is the story of how we have achieved it.

Path to Continuous Deployment

Official Aftermovie

Secret Tips to Improve Your Webpack Configuration

Gatsby High Level

2019

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.

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

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.

Czech Republic