React Live Conference is a unique chance to watch React & React Native experts implementing the latest tools, techniques and principles live on stage, on a 500m2 screen.

A full-day, live-coding focused React Conference in the heart of Amsterdam. Come together on the 2nd of October for a spooky React Conference style gathering of 1000 React and Javascript developers. With React and React Native experts and enthusiasts flying in from across the World to teach you and code - live on the biggest conference screen in the World.

13 Presentations from the World's React & React Native Leaders covering the newest releases, principles and tools to apply when building components with React including: State Management with React Hooks, Fabric, TurboModules and CodeGen as a de-facto standard, Design Patterns, Mobx and Rxjs, React 16+ updates, React Animations with SVG and more!

React Live is a developer run and community driven React conference brought to you by Frontend Love.

React Live

2020

React Amsterdam is a celebration of good things coming together: React that rocks and spring in Amsterdam that blossoms.

A full-day, two-track conference on all things React, gathering Front-end and Full-stack engineers across the globe in the tech heart of Europe. 

Next to the main conference day, be prepared for a number of hands-on workshops, pre-party meetups, and mini conferences throughout the week of the event.

React Amsterdam

My experience working both on free and paid tools, and which type of tool makes sense depending on your team and needs.

In this talk I’m going to convince you that paid UI components will solve all your problems, and that you should immediately give me all of your money. Maybe. Or perhaps I’ll draw on my experience working both on free and open source tools (jQuery, jQuery UI, NativeScript), as well as paid tools (Kendo UI, KendoReact), and discuss which type of tool makes sense depending on your team and needs. In any case the talk will go fast because lightning is in the title.

Why Paid UI Components Aren’t Evil

Frontend Developer Love Conference is 3 Full Days of Talks from 35+ Global Javascript Leaders from around the world Join fellow Javascript Frontend Developers traveling in from over 50 Countries around the world for the Largest Javascript Conference in Europe. We will host over 3,000 People flying in from 50+ Countries around the World during this 3 Day Celebration of Javascript

Javascript is at the heart of the Frontend Developer Love Conference with a variety of topics being covered such as:
Vue, Angular, React, Design Systems, Serverless, Cloud, AWS, Functional Programming, Microservices, Agile, Testing, Automation, Become as good a Leader as you are coder, speechRecognitionAPI, Web Audio, Hip Hop & Code, Gatsbyjs, AWS Amplify, Jamstack, GraphQL, Webpack 5, Typescript, Devops, Microfrontends, Nodejs, Web Assembly, Sveltejs, NPM Packages, Artificial Intelligence, Ecommerce

Our Speakers have spoken at 100+ Global Javascript & Developer Conferences in 30+ Countries in the last 12 months. We have developers that have worked at companies such as Google, Facebook, Volkswagen, Tommy Hilfiger, Uber, Spotify, ING, Amazon, Microsoft, Netflify, Gitlab, IBM, Dell, Sony

Since Frontend Developer Love started in 2018 it has been a Sold Out Conference.
Theater Amsterdam has been described by our Global Javascript Leaders as the "greatest conference venue in the world". You will get to see Vue Experts delivering high level talks with coding examples on a large 500m2 Screen. As part of your conference experience we have arranged diverse, world class and free lunch time catering. You get to relax and sit back in cinema seats allowing you to open up your laptop if you wish to code along. 

Frontend Developer Love

Micro-interactions with React Spring

A strategy on how to properly configure webpack for your project

A strategy on how to properly configure webpack for your project.

How to Pack your Webpack

The world is changing fast. As a result, every aspect of software changes towards smaller. Teams, management, organizations, cycles and components. 

The world is changing fast. More precisely, the world is changing at increasing speed. This means things that were not possible five years ago come into reach. 

Incumbent organizations need to adapt fast to keep up with new competitors that use new technologies easier, faster and better than they do. 

As a result, every aspect of software changes towards smaller. Even smaller teams or even micro-teams, less management, flatter organizations, even shorter cycles, and smaller components.

How thinking small is changing software development big time

How serverless empowers frontend teams to get so much done without needing a backend specialist and enables teams to move super fast.

Serverless gives you wings

Hip Hop and Unit Tests. A match made in heaven? Explore Web Audio and its suitability for audio transcription. 

Hip Hop and Unit Tests. A match made in heaven? Through a mix of audio, video and live performance, Tony will explore Web Audio in an attempt to convince the audience of its suitability for audio transcription. This is a fast paced and highly engaging talk with a crescendo you won’t forget.

Beats, Rhymes and Unit Tests

How to swim but not sink in plenty of testing frameworks and have a solid e2e test coverage with minimal effort?

A new day brings a new framework. This rule applies also for e2e testing tools, which is cool yet frightening. How to swim but not sink in plenty of testing frameworks and have a solid e2e test coverage with minimal effort? 

Anastasia is going to share her insights on this which might be helpful for every developer who does care about software quality improvement paired with automated testing.

Modern Solutions for e2e testing

Last year we started the rebuild of a big e-commerce platform, to increase performance. I will explain how we mixed Nuxt, Vue, and Storybook together and how we are able to develop great code with a big team.

Last year we started the rebuild of a big e-commerce platform. The main goal was to increase the performance of the application but also to enhance the daily comfort of the developers. The rebuild was done using Nuxt and Vue, and to create a good developer experience we used Storybook to work on the components in an agnostic way. In this talk I will explain how we mixed all these tools together and how we are able to develop great code with a big team.

DX is the new black. Learnings from using Nuxt and Storybook at scale

Learn what Blazor is, how it uses WebAssembly, and how to get started with it all.

One of the latest technologies targeting front-end development that is gaining quite some traction is WebAssembly. And the latest development stack for it is Blazor! While it’s still in preview mode, it’s considered as pretty innovative as far as WebAssembly goes.

In this session, you’ll learn what Blazor is, how it uses WebAssembly, and how to get started with it all.

By coding some examples, we’ll be able to investigate several aspects of Blazor’s support forWebAssembly, such as: dependency injection, data access, routing, editing and validation and MVVM.

Come along and discover if this new technology is something for you!

Blazor with WebAssembly

Learn how to implement your own conversational AI within your web application.

The Google Assistant is super popular. Businesses want their own voice AI. Unless you are a manufacturer for tv setup boxes or headphones, you probably don't need to use the Google Assistant, you can integrate a (voice supported) conversational AI within your own existing web/mobile app with the use of Dialogflow and Cloud Speech to Text (STT), Cloud Text to Speech (TTS).

However, implementing audio streaming within (web) applications can become difficult. It's not that the Google APIs are hard to use; those APIs are pretty straightforward. The problem is the combination of all required technology; A front app, WebRTC, microphone streams, audio encoding, sample rates, websockets, a back-end app, Google streaming APIs...

Lee Boonstra, developer advocate for Conversational AI, (and author of the ultimate audio streaming to Speech APIs - guide), will guide you how to implement your own conversational AI within your web application.

Audio Streaming - Using WebRTC for building your own Voice AIs

See why accessibility is such a critical part of our job. After this session, you’ll have enough knowledge to start fixing your front-end’s most low hanging A11Y issues.

Accessibility (A11Y) is an often misunderstood topic by developers. We also tend to not see the importance and if we see it, we struggle on getting started because it’s such broad topic. What can we do to improve?

In this talk Bob will explain web accessibility and why it’s such a critical part of our job.

He will explain how to get started in testing and improving your apps using tools and methods that are market standard.

There will be real-world examples from his daily job and he’ll share how to tackle common pitfalls.

After this session, you’ll have enough knowledge to start fixing your front-end’s most low hanging A11Y issues.

Practical A11Y for Web Apps

Dexter shares his love for svelte, what sets it apart from other frameworks and shows how it enables him to create truly reactive apps.

Svelte: the last framework we need?

Noer and Sima share with you 3 main insights they have gained while teaching programming to people with a radically different background.

Noer and Sima share with you 3 main insights they have gained while teaching programming to people with a radically different background. Sima Milli will share her personal story.

Refactor your life

Wrap existing REST APIs into one single GraphQL endpoint on both the client and server side.

Your frontend developers are pushing to get started with GraphQL, but you don’t have the backend capacity to migrate your existing REST APIs to GraphQL? Or you want to have a GraphQL API next to your existing endpoints that are based on REST, without having to rewrite all your controllers? 

In this talk I’ll show how to wrap existing REST APIs into one single GraphQL endpoint on both the client and server side. This allows you to access the power of GraphQL without having to change any of your existing code or connect to a database.

GraphQL Without a Database

What happens when we take the advancements of GraphQL and combine them with a mental model that all data should be local and offline first, with eventual consistency to your database as a second thought? 

Complexity, and the consistent attempts to reduce complexity, are at the core of the evolution of technology. As technology evolves, we then find harder problems to solve and are presented with new challenges. In the client space, we’ve seen innovation that has addressed how we deal with modern application concerns like real-time and offline data while at the same time GraphQL has continued to gain in market share.

What happens when we take the advancements that GraphQL has introduced as a paradigm and combine them with a mental model that all data should be local and offline first, with eventual consistency to your database as a second thought? 

In this talk, I’ll talk about a data store paradigm that allows developers to work with a single, local database and source of truth, and the idea that you should not have to make more than one write action to have (eventual) consistency across the client and server.

The Future of Real-time | Offline | Data

The state of WebAssembly

Aftermovie

React Live Conference is a unique chance to watch React & React Native experts implementing the latest tools, techniques and principles live on stage, on a 500m2 screen.

A full-day, live-coding focused React Conference in the heart of Amsterdam. Come together on Friday the 13th September for a spooky React Conference style gathering of 1000 React and Javascript developers. With React and React Native experts and enthusiasts flying in from across the World to teach you and code - live on the biggest conference screen in the World.

13 Presentations from the World's React & React Native Leaders covering the newest releases, principles and tools to apply when building components with React including: State Management with React Hooks, Fabric, TurboModules and CodeGen as a de-facto standard, Design Patterns, Mobx and Rxjs, React 16+ updates, React Animations with SVG and more!

React Live is a developer run and community driven React conference brought to you by Frontend Love.

What goes into building a design system

SVG components are powerful. Elizabet shows how to prepare an SVG in Sketch, convert it to a JSX React component, and animate it with Framer Motion. It's surprisingly simple.

Animating an SVG cat with React.js

Build an iOS and Android app in 15 minutes using React Native

FOMO. Fear-Of-Missing-Out. New libraries, JS features, framework versions… the list goes on and on. Kitze talks about pragmatism in the fast-paced world of app development.

Navigating the Hype-Driven Frontend Development World

Microfrontends

Live coding a Portfolio with Gatsby + GraphQL

CodeGen will utilise your TypeScript/Flow types to generate more native code at build time, instead of run time. TL:DR: smaller code size, faster execution, fewer errors.

React Native CodeGen

Reinventing MobX

Advanced React Trivia

Learn how NextJs allows you to create React apps with Server Side Rendering, easily.

Next level Coding

Measure your application’s performance health, fixing performance and handle media at scale.

React Tune Up

Code Splitting in React Native

See how React state management has evolved over the years. Learn how to build an accessible To-Do app with useReducer(), useState(), and React Context to manage state.

State Management with React Hooks

2019

JavaScript is #1 on demand programming language in the world with 25 millions of developers behind it. Meet the ones who shape out the now and the future of the prospering nation. June 5-7, 2019.

Amsterdam JSNation is a 2-day event focusing exclusively on JavaScript development. At our conference, inspiring talks meet fresh ideas and good people with summer Amsterdam in the background. 

We recognize JavaScript development as an art of engineering that is why the conference happens in a former church Rembrand attended. Which is located in the most center of the city next to the best places Amsterdam has to offer.

JSNation

A look at how JS got to where it is today, as well as where it’s headed. Will that future direction continue to be a good one, or not?

A look at how JS got to where it is today as well as where it’s headed, but asking the critical questions of if that future direction will continue to be a good one or not?

Keep Betting on JavaScript

Learn how Google’s security team has achieved a high-level of safety against XSS, and related problems, by integrating tools to make it easier for developers to produce secure software.

18 years have passed since Cross-Site Scripting (XSS) became the single most common security problem in web applications. Since then, numerous efforts have been proposed to detect, fix or mitigate it, but these piecemeal efforts have not combined to make it easy to produce XSS-free code.

This talk explains how Google’s security team has achieved a high-level of safety against XSS and related problems by integrating tools to make it easier for developers to easier to produce secure software than vulnerable, and to bound the portion of a codebase that could contribute to a vulnerability.

We will show how this works in practice and end with advice on how to achieve the same results on widely-used, open-source stacks and new browser mechanisms that will make it much easier to achieve high levels​ of security with good developer experience.

Securing the DOM from the Bottom Up

Tools that supercharge unit, integration, and end-to-end tests, with a focus on Cypress.

Day to day I work on Cypress.io, an open source end-to-end test runner. And I love it - but there are other tools that help me write better tests and better code. 

In this presentation, I will show some of my favorite tools that complement, extend and supercharge my unit, integration and end-to-end tests.

Testing Tools and Their Friends

The reasoning behind some of the breaking changes in the next webpack version. 

A changelog only tells half of the story. In this talk I want to talk about the reasoning behind some of the breaking changes in the next webpack version. 

I try to convince you that doing these breaking changes is worth it and we are not randomly trying to make migration harder.

Webpack 5 - Why Breaking Change? What is next?

Short and easy introduction to lenses, profunctor optics, and how to use them for state management.

Functional lenses for contemporary frameworks

We use the term open source to mean a lot of things: it's difficult to discuss the struggles of simply being a maintainer whether you are a volunteer or working on it at a company.

We use the term open source to mean a lot of things: it's difficult to discuss the struggles of simply being a maintainer whether you are a volunteer or working on it at a company. 

We lack clarity in what sustainability looks like because there are so many different goals: diversity in participation and work, community building, building a business. 

I'll be going through some of my experiences in going from onlooker to contributor to full time maintainer and how we may want to broaden what maintenance looks like and where we can look to for guidance.

Open Source: Charity or Business?

PWAs load quickly, even on flaky networks, have an icon on the home screen, can re-engage with users by sending push notifications, and load as top-level, full-screen experiences. 

Progressive Web Apps combine the best of the web and the best of apps. They load quickly, even on flaky networks, have an icon on the home screen, can re-engage with users by sending push notifications, and load as top-level, full-screen experiences. 

In this talk Jamie Maria Schouren explains the what, why, and how of Progressive Web Apps, her own quest in search for "app-iness" and with code examples and real-life​ use cases, shows why PWA’s are the future of the web!

The search for App-iness

We'll take a brief tour of our Accessibility Checklist and talk about how our development team deals with the practical implications of implementing accessibility on our React frontend.

Inclusivity is important to us. As a company that builds web applications for Universities and Research Institutes we need to ensure that everyone can successfully use our Web sites and applications regardless of their physical or cognitive ability. 

We'll take a brief tour of our Accessibility Checklist and talk about how our development team deals with the practical implications of implementing accessibility on our React frontend.

A11Y and React

This talk is for people curious about GraphQL, Gatsby, and JAMStack generally, as well as those people interested in speeding up the development and deploy process for their teams.

This past year my team at PayPal began looking at how we could radically improve our developer experience and deliver high-quality applications faster. 

We landed on an approach we call “static apps” that removes our heavy node layer and replaces it with static markup and JS on a CDN. All of the dynamic content is served over GraphQL APIs. This approach to using JavaScript, APIs and Markup is sometimes referred to as the JAMStack. 

This talk will walk through some of the challenges we faced with our node.js application servers and how we are trying to solve them by moving to this new model. Performance, stability, security and developer experience concerns will all be highlighted. 

This talk is for people curious about graphql, gatsbyJS and JAMStack generally as well as those people interested in speeding up the development and deploy process for their teams.

An Introduction to Static Web Apps with JAMStack

Learn how to leverage functional programming techniques to reduce complexity and write safer JavaScript in a real-world scenario.

With the rise of software-based innovation, the business rules and flow controls are getting more complex. Software engineers do not only have to handle increasingly complicated problems, but they also carry greater responsibility for ensuring the quality of their code. 

It’s clear that our tools and methods should evolve to build robust software. In this talk, we’ll explore how to leverage functional programming techniques to reduce the complexity and write safer JavaScript in a real-world scenario. Come to see what’s exciting about static analysis, pure functions, composition and immutability; and how these principles are a powerful tool to optimize your code for correctness.

Stop the Software Apocalypse with Functional Programming

Explore many of Angular features and improvements in the pipeline that allow anyone to build and deploy performant apps with very little overhead.

Angular grew significantly in the past few years from both a tooling and developer experience standpoint. This talk will explore many of the features and newer improvements in the pipeline that allow anyone to build and deploy performant apps with very little overhead.

Through real demos and examples, we’ll cover Ivy, bundle budgeting, differential loading, automatic code-splitting, and progressive rehydration of SSR elements. In the second part of the talk, we’ll focus on how to efficiently prefetch and preload different modules and components.

Building Fast Angular Applications from End-to-End

JavaScript Proxies are fun and powerful, but you should probably never use them! Learn why. Plus, see how Immer makes working with immutability easy, 

Immer is a tiny package that allows you to work with immutable data structures with unprecedented ease. It doesn't require learning new data structures or update APIs, but instead creates a temporarily draft tree which can be modified using the standard JavaScript APIs. 

Immer makes all the ceremony that is needed to perform deep updates in immutable objects obsolete.

Brace yourself; for example your Redux reducers will become twice as short without giving up on any of the semantic constraints.

Immer (optionally) uses proxies under the hood. Proxies are an exotic JavaScript feature that is nowadays available in all modern browsers. What are they, how do they work and why should you (not) use them? How did they make Immer possible?

Join this talk to learn how you can finally use immutability in JavaScript without fighting the language. Or just to get an idea about the powerful patterns that are possible nowadays in JavaScript, by using proxies.

Immer, Immutability and the Wonderful World of Proxies

Learn the alternative ways of presenting 2D content in the browser (CSS, Canvas, WebGL), along with the pros and cons of each one.

This talk is about looking at alternatives to traditional ways of presenting 2D content in the browser. We will look at the different methods along with the pros and cons of each one. 

I will take a slightly deeper dive and show examples of how WebGL can be used to render incredibly fast 2D graphics and also do some pretty interesting effects.

Turbo charging 2D on the web

Explore the most important performance metrics and ways you can easily set up performance tests using WebDriver, as part of your CI/CD pipeline.

The performance of a web application is the most crucial non-functional aspect that is often ignored and not tested. Their implications are difficult to understand, hard to predict and in most cases connected with bad user experience and revenue loss.

With Lighthouse, WebPageTest and other tools you are already able to capture tons of performance metrics of your application. However understanding and testing them often feels difficult and painful.

In this talk, Christian will present you the most important performance metrics and ways how you can easily set up performance tests using WebDriver as part of your CI/CD pipeline.

Automated Performance Testing With WebDriver

Build a cross-platform game using an adaptive gameplay. This will allow the same web app to be played on touch screens, using a mouse or pen on desktops, up to the ultimate immersive experience with WebVR!

We’ll see how to build a cross-platform game using an adaptive gameplay. This will allow the same web app to be played on touch screens, using a mouse or pen on desktops, up to the ultimate immersive experience thanks to WebVR! By using PWA, it will run totally offline, can be pinned on your mobile home screen or even be pushed to the Microsoft Store. 

We'll see how to build the 3D scene using glTF, create the loading screen using the latest CSS features, manage the gameplay and finally how to use a service worker in the best way possible in collaboration with IndexedDB. I'll share what I've learned while creating the game. Fun topic but serious learnings. 

I'll demo the game on desktop, mobile and on a VR headset which provides a very cool gameplay via the VR controllers! :)

Using WebGL and PWA to build an adaptive game for touch, mouse and VR devices

Post-Mortem debugging is a powerful technique that allows you to take a memory dump, when an issue occurs in your application, and later analyze it offline.

Post-Mortem debugging is a really powerful technique that allows you, through the use of several tools, to take a memory dump when an issue occurs in your application and later analyze it offline.

The talk will primarily focus on llnode and how you can use this tool to better understand why a Node.js process is behaving odd or is crashing.

Post mortem NodeJS debugging

A journey into the asynchronous debugging horrors, how to avoid them and what patterns can be used to ease the life of each developer debugging applications. 

A journey into the asynchronous debugging horrors, how to avoid them and what patterns can be used to ease the life of each developer debugging applications. 

We all have run into issues debugging JavaScript. Knowing what went wrong due to missing stack traces in asynchronous contexts and finding the actual issue takes way too long. 

Following best practices in error handling reduces debugging time and improves the code base a lot!

Error handling: doing it right!

See how you can control multiple drones using JavaScript and Node.

We're pretty used to drones flying around us by now. Until now most of these drones were still controlled by a human operator. But what if we could control them solely using our code? 

In this talk I will show how to control multiple drones using JavaScript. 

With the help of Node.js we'll send commands to the drones and read back their telemetry. I will talk about the difficulties of flying and keeping control of a drone completely without human interference. 

In the second part we will actually send the drones flying and I'll ask two audience members to participate in a small 'drone' game.

Controlling a swarm of drones with NodeJS

Learn what it means to ‘load test’ your application, and how to get started with writing your first script.

The key to finding the optimal solution to a problem is to threefold: maximise the number of tools in your ‘personal tool box’; know all their capabilities and uses; and to know which tool is best suited to fix the particular problem in front of you. 

This talk will enable you to grow all three aspects around load testing. 

It will look at what it means to ‘load test’ your application, how to get started with writing your first script and provide you with a case study and an insight as to the tools and techniques that we use here at the FT to help identify such performance issues.

Ready, Steady, Crash!

In this talk we're going to rewrite RxJS from scratch, seeing behind the curtains which are the core components and the ideas of the library. 

RxJS has become almost a standard in the emerging reactive Front-End world. If you're not using it right now, you probably played with a few operators. 

In the talk we're going to rewrite RxJS from scratch, seeing behind the curtains which are the core components and the ideas of the library. 

You'll see how to build Observables, Subscriptions and Operator, then we'll introduce Schedulers and how they're used in RxJS. If you fancy Reactive Programming or simply you want to learn something new then... this talk is for you!

Reinventing RxJS

Top #10 things I've learned while putting JavaScript on the top of server-side benchmarks.

This presentation is about server performance, which means that no time in the world would be enough to cover it all. Hopefully, I can share with you the top #10 things I've learned while putting JavaScript on the top of the server side benchmarks.

You will learn about runtimes and engines, how some are more capable than others, and sometimes the obvious choice is not always the right one...

This talk is about thinking outside of the box, being creative and don't take anything for granted. We will debunk myths about native code vs. script or RAM usage; it's going to be fast! I promise!

10 thing I learned making the fastest JS server runtime in the world

We moved our application from the cluster module to PM2 & RabbitMQ. This talk will cover the Why/What/How we made this migration.

As Node.js is single threaded. This is why you can’t take full advantage of multiple core machines unless you use the cluster module or a process manager like PM2.

We moved our application from the cluster module to PM2 & RabbitMQ. This talk will cover the Why/What/How we made this migration.

RabbitMQ and PM2 in Node for managing Multiple Processes

How to build a really large application? How to think about architectural layers? What is wrong with the majority of JS frameworks? How does GraphQL influence my architecture?

I've seen a lot of NodeJs applications. I see a lot of misunderstandings around architectural patterns. 99% of NodeJS tutorials do not cover this topic and limited to "hello world" apps. 

How to build a really large application? How to think about architectural layers? What is wrong with the majority of JS frameworks? How does GraphQL influence my architecture? 

I will answer all of these questions.

The working Architecture of Node Applications

Zero Knowledge Architecture is a pattern that allow to build applications where all data is stored and exchanged in an encrypted way. 

Zero Knowledge Architecture is a pattern that allow to build applications where all data is stored and exchanged in an encrypted way. It enforces end-to-end encryption and client-side operations only. 

Let's see how to build a Zero Knowledge backend, involved in data transfer and keys-echange system, with a JS client-side lib. No more excuses not to secure your applications design.

Building Zero-Knowledge Backend

The ownership of the npm package 'event-stream' changed hands, late 2018, and found its way into the hands of an attacker, targeting a Bitcoin wallet.

The ownership of the npm package event-stream changed hands late 2018 and found its way into the hands of an attacker targeting a specific mobile application. How did an attacker go from an npm package to a mobile application? How was this exploit found? What purpose did each of the three payloads have?

This session will dive into the three payloads of the attack, how they worked, how they were obfuscated, and what their goal ultimately was.

There's no reason to assume this is an isolated event and understanding how this occurred and what it did is an important part of staying secure going forward.

Analysis of an exploited npm package

When thinking of backend languages, JavaScript is not the first thing that comes to mind. But why not? 

When thinking of backend languages, JavaScript is not the first thing that comes to mind. But why not? 

Why not write a backend in JavaScript? Or even a whole microservices infrastructure!

In this talk we will discuss exactly what a microservice can look like in Javascript with the addition of frameworks like Socket.IO or NestJS and how several microservices would communicate with each other. 

There is no prior knowledge of JavaScript required. Everything we show will be explained.

What's your backend written with? JavaScript?!

Intro on building a server-side rendered website with Quasar, by using Vue and Nodejs. 

Razvan does an intro on building a server-side rendered website with Quasar by using Vue and Nodejs. Sections: What is SSR, Writing Universal Code, Configuring and building SSR, Client-side hydration, SSR with PWA, Deploying.

SSR with Quasar Framework

Amsterdam JSNation 2019 was a 2-day event focusing exclusively on JavaScript development. At our conference, inspiring talks met fresh ideas and good people with summer Amsterdam in the background. We recognize JavaScript development as an art of engineering that is why conference took place in a former church Rembrand attended, located in the center of the city right next to the best places Amsterdam has to offer.

JSNation 2019 Aftermovie

React Amsterdam is a celebration of good things coming together: React that rocks and spring in Amsterdam that blossoms.

A full-day, two-track conference on all things React, gathering Front-end and Full-stack developers across the globe in the tech heart of Europe. We're coming back with a new gig on April 10-12, 2019. 

Mark your calendars for the biggest React community event.

Same as last year, days before (and after) the main event, we'll host a training day, with multiple workshops on advanced React, GraphQL, Testing, React Native and more. 


Kent talks about how important it is to understand the abstractions that we use (Hooks, Suspense, JSX, etc), if we want to level up our abilities, speed and skills. 

React is a brilliant JavaScript library for building simple and complex user interfaces. 

In our eagerness to apply React to our most complex of problems and ship solutions today, we can get lost in the 🌲🌲🌲 forest of abstractions 🌲🌲🌲. 

When it comes to leveling up our skills in anything, I find the most effective method is to take a step back and understand the foundational fundamentals. 

To strip away all abstraction until what we're left with is the bare bones. The better you understand an abstraction, the more effective you will be at using it. 

In this talk, we'll get more effective at using React Hooks, React Suspense, and JSX.

Requisite React

React Native is a great way to build native apps for iOS, Android and other mobile platforms. In this talk, we will look at the internals of React Native, and how code written in JavaScript can power a fully native mobile application. We will look at the various parts of the current system like the bridge, the UI manager and the plugins. We will also touch upon the rendering process and compare it to React’s rendering on the web.

We will look at some of the new and exciting improvements (like Fabric, TurboModules and JSI) and talk about how they significantly improve React Native. This talk stems from my experiences as a web-developer newbie on the React Native team, and is an attempt to document my journey in comprehending the code base. At the end of the talk, the attendees will not only be able to build React Native apps, but also understands how it all works together.

Building React Native

React on it’s own has a very small API surface. Most of the magic happens in user-land.

But, there's a lot out there: Higher order components, Render props, Compound components? Provider methods? Learn which component pattern will make your codebase better in which use case.

Refactoring React

There are quite a few theoretical concepts of writing good a React application, including popular functional programming approaches. However, few take into consideration the impacts these will have on performance of the application. 

In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.

Practical Performance for React (Native)

Thanks to React's component-oriented architecture, the React 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 React 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.

Designing with React

React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. 

There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native. Yet this is not always the best approach. There is value in only sharing your business and state logic; keeping your render code separate.

In this talk I will give real examples from my work with MADE.COM, migrating their web and mobile application to React and React-Native with code sharing as a primary objective.

Sharing Code Between React and React-Native: What Not to Share

“Should designers code?” or “Should coders design?”—these two eternal questions are being asked for years with no particular answer given.

- How to let developers know what typography style or button variance they should be using on this particular screen?
- How to ensure that the whole UI is consistent?
- How to let designers know that some screen design doesn’t fit the requirements and needs to be updated?
In order to answer those questions designers and developers have to speak the same language. But what language should it be? UI components and pattern libraries can provide this intermediate abstraction and be a common language for both designers and developers.

A Common Design Language. Let Designers and Developers talk to each other

React Native is great for mobile applications on iOS and Android but there is more in the world of native app development. React Native can be used to get your app on the Windows and Mac OS X platform. And why not Electron or even newer Marzipan to get your app to the other platforms or can you combine these technics to get a good app as result.

In this talk you wil see how to get React Native to the Windows and Mac OS X platform, what the advantages and disadvantages are with these setups and what you can do to get the best results for your App.

Building for a Bigger World Than Mobile

Spectrum is an open source chat app for large online communities and was recently acquired by GitHub. We are a team of three with a predominantly frontend and design background and have worked on it for close to two years. With the benefit of hindsight, let's talk about the technology choices I regret and the lessons I have learned.

Tech Regrets at Spectrum

Did you know React Native has accessibility rules? In this talk, I will show you why accessibility matters, what those rules are, accessibility standards your app falls into, common patterns to follow and how to get over your fear of voice-over.

By making our apps accessible, we provide a great experience for all our users. This talk is sure to leave you with actionable ways in making your apps accessible. Let’s make this native world a better and inclusive place for everyone.

Make Your React Native Apps Accessible

Once upon a time, you had one Single Page Application using a Monolith Backend that relies on a Database. Then you started getting some users and suddenly you needed multiple instances of your Monolith Backend and more replicas of your Database. Your user base kept growing and also your development team was growing, so you split your Monolith backend into Microservices with their own Databases.

You’re very happy about the situation until you realize that the same problem you had on the backend it’s now on the frontend. Multiple teams are working on the same codebase, it’s hard to do frequent releases and there’re a lot of cross-team communications that slow things down.

At DAZN we battle-tested the Microfrontends architecture leveraging feature like blue-green deployments in the frontend, framework agnostic teams and drastically reduced cross-team dependencies.

Scaling Applications with Microfrontends

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 real world examples! I'll show how to leverage the React ecosystem to create performant applications: architecture, patterns, typing, useful open-source modules and tooling... 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

Developers and designers don’t often use all SVG superpowers in their React applications.

This way, to drive your inspiration, I am going to tell you the story of an SVG image that one day made a very special friend - ReactJS. Alone and despised by its family, SVG yelled Enough! Now you’ll see what I’m all about!. And with this epic scream, little SVG unveiled all its superpowers. She took her friend React and they showed the world how to come up with creative solutions together.

An SVG’s Tale

Netflix changed their frontpage a while back to only serve HTML, CSS and a small amount of Js. Let’s have a look on how you can do the same with Next.js, and if the principles still apply today. Is the user getting a better perceived experience when we turn off the client side JavaScript?

Lightning fast SSR React apps with top perceived performance and no (client side) JavaScript

During this lightning talk, let's walk through the pros and cons of server-rendered applications, when you want to have it and what you can expect.

Demystifying server-rendered React apps: Performance & Security

Next.js is one of the most convenient and powerful ways of developing React apps on the web. With powerful features out of the box such as code-splitting, server-side rendering and powerful optimizations, this talk discusses the exciting next steps for Next.js.

Next for Next.js

React is a hugely popular frontend framework that revolutionized the frontend development world. React is built primarily for the browser, while Node has fundamentally different operational constraints to the browser. 

As a Principal Architect and Consultant it has become painfully clear that React’s Server Side Rendering (SSR) is a performance bottleneck for web backends around the world. 

This talk demonstrates a very simple solution that can be dropped into pre-existing React applications to vastly improve the throughput of an SSR Node server (around 20-40x+).

Speeding up React SSR

Panel discussion with Advice Lounge members

With the emergence of more & more powerful & sophisticated managed services like Algolia, AWS AppSync, Cloudinary, Auth0, Amazon Rekognition & Firebase it's now completely possible for front-end engineers to build full-stack web & mobile applications while with almost no back-end code, relying on these services to do the heavy lifting for features like data layers, search, authentication, & authorization & using serverless glue functions to handle what’s left.

In this talk, I'll talk about this philosophy in depth, discuss the options available from different service providers, & then show how (live-code) to build a full-stack React Native application in just a few minutes by using React & AWS Amplify React Native to quickly build a real-world app complete with a GraphQL API, analytics, search, authentication & authorization.

Full-stack React Native in the Era of Serverless Computing

Data fetching makes up a large part of our React apps, yet it's also some of the most complex code we write. GraphQL can help us reduce this complexity, especially when it's combined with intelligent tooling. 

In this talk, we'll explore how to achieve a friction-free state management experience with GraphQL and Apollo right inside your editor.

The GraphQL developer experience

While Animations can be created in React Native pretty easily, real world mobile apps require a combination of several layers of animations, gestures and micro interaction animations to make user experience stand out. 

In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.

Demystifying Complex Animations Creation Process in React Native

WebGL lets you unlock the power of your GPU. In principle, you can paint almost anything you can dream of. In practice, WebGL is hard, and though projects like three.js make it easier, there are still a lot of hurdles to integrating it into your site in a practical way.

Let's explore how Hooks can make it easier to integrate powerful GPU-driven visuals into our React apps, giving us the best of both worlds: the power of WebGL with the ease and expressiveness of a React component tree.

Painting Pixels with WebGL with React Hooks

Building an app destined for production is a daunting task, especially to replace existing legacy apps available for download in the App and Play Store. We could have pursued a typical release strategy—instead, we got creative with React Native.

We built a strangler-style architecture, a technique commonly reserved for web services, to release our greenfield React Native product user-by-user. The effect was some pretty unique and awesome advantages to how we built and tested our new app—but software is never perfect.

Netherlands