Monday, 17 September, 2018 UTC
Summary
Browse around all the videos recorded at React conferences and meetups during 2018 Q1. Huge thank you to all the speakers who participated in the creation of this collection. The Q2 digest is already on the way, stay tuned with the monthly newsletter and twitter.
ReactNYC (New York, NY)
Improving Performance of Your React Components
Mallory Bulkley (Persado)
React does a lot of performance optimization for us, but over time, inefficiencies in a large or complex application can add up and you may find some parts of your app have become slower than you’d like. In this talk, I’ll discuss how to find your bottlenecks and how to address them. The focus is on practical ways to significantly speed up your React applications that anyone can apply right away.
React does a lot of performance optimization for us, but over time, inefficiencies in a large or complex application can add up and you may find some parts of your app have become slower than you’d like. In this talk, I’ll discuss how to find your bottlenecks and how to address them. The focus is on practical ways to significantly speed up your React applications that anyone can apply right away.
React 16: What’s new
Harry Wolff
The release of React 16 was a huge deal for the React community. Aside from rewriting the entire internal architecture, React 16 brings an exciting array of new and exciting features. This will talk will be a hands on demonstration of all the new features of React 16, showing what they are, and how they will make your React applications better and more pleasant to write.
The release of React 16 was a huge deal for the React community. Aside from rewriting the entire internal architecture, React 16 brings an exciting array of new and exciting features. This will talk will be a hands on demonstration of all the new features of React 16, showing what they are, and how they will make your React applications better and more pleasant to write.
Advanced Redux Patterns
Nir Kaufman (500Tech)
In this talk, we will explore advanced patterns and techniques in Redux inspired by old and proven design principles of large scale messaging-based systems.
In this talk, we will explore advanced patterns and techniques in Redux inspired by old and proven design principles of large scale messaging-based systems.
Demystifying That Regex Stuff
Shannon Kendall
For those unfamiliar with them, regular expressions can look like some kind of black magic that reduces lines of code into a few, cryptic symbols. This introduction breaks down what is actually going on inside those characters to provide such a precise, compact method of searching through strings. It turns out it’s not wizardry after all.
For those unfamiliar with them, regular expressions can look like some kind of black magic that reduces lines of code into a few, cryptic symbols. This introduction breaks down what is actually going on inside those characters to provide such a precise, compact method of searching through strings. It turns out it’s not wizardry after all.
Contribution to Open Source
Ethan Arrowood
Contributing to open source is a noticeable skill many employers look for in new candidates. Ethan will review four open source projects he has contributed to, how it helped get an internship at Microsoft, and how you can start contributing too.
Contributing to open source is a noticeable skill many employers look for in new candidates. Ethan will review four open source projects he has contributed to, how it helped get an internship at Microsoft, and how you can start contributing too.
Components as Data
Orjiewuru Kingdom (Andela)
Ever had to manage form state without a dependency? In this brief talk, we’ll learn to handle dynamically generated form components, with the goal of thinking about our React components as Data. This gives us the ability to create even more dynamic and powerful react applications.
Ever had to manage form state without a dependency? In this brief talk, we’ll learn to handle dynamically generated form components, with the goal of thinking about our React components as Data. This gives us the ability to create even more dynamic and powerful react applications.
Creating create-react-app
Shawn Wang
We all use create-react-app but how much do we know about how it works internally? In this talk we discuss how I recently dived into the source code for create-react-app to make a fun clone! It looks intimidating but is really not, once you get a hang of how lerna monorepos work and try making one of your own. Watch this and then go make your own create-awesome-app!
We all use create-react-app but how much do we know about how it works internally? In this talk we discuss how I recently dived into the source code for create-react-app to make a fun clone! It looks intimidating but is really not, once you get a hang of how lerna monorepos work and try making one of your own. Watch this and then go make your own create-awesome-app!
Tools For Measuring React Performance
Brenda Jimenez
In this talk we will take a look at some React performance measurement tools: react-perf for projects built with React prior to version 16 and React Performance add-on for projects built with React 16 and above.
In this talk we will take a look at some React performance measurement tools: react-perf for projects built with React prior to version 16 and React Performance add-on for projects built with React 16 and above.
Painless Migration From Backbone to React/Redux
Jim Sullivan
There are plenty of books, tutorials, and tools to help you start a brand new React project. But what if you already have a large application written in a legacy framework and you want to migrate to React? You can’t have your whole team drop everything and spend months rewriting your entire front end codebase. Jim will talk about challenges faced and solutions used by Conductor as they iteratively migrate to React from a large, complex, legacy Backbone app.
There are plenty of books, tutorials, and tools to help you start a brand new React project. But what if you already have a large application written in a legacy framework and you want to migrate to React? You can’t have your whole team drop everything and spend months rewriting your entire front end codebase. Jim will talk about challenges faced and solutions used by Conductor as they iteratively migrate to React from a large, complex, legacy Backbone app.
Form and Fury: inside a redux-form Implementation
Joe Stanco (Jetty)
With 1.6M React projects relying on this HOC to handle form state with Redux (http://redux-form.com), what could go wrong? An introduction to form management and a cautionary tale about navigating a snake pit of undocumented features, inscrutable behaviors, and nasty side effects.
With 1.6M React projects relying on this HOC to handle form state with Redux (http://redux-form.com), what could go wrong? An introduction to form management and a cautionary tale about navigating a snake pit of undocumented features, inscrutable behaviors, and nasty side effects.
Lazy Loading Images in ReactJS
Mike Tsamis
In this talk, we will explore the concept of lazy loading which involves deferring loading content in order to optimize content delivery and improve website performance. We’ll walk through the process of how to wrap components that we want to lazy load using the open source package “simple-react-intersection-observer”, analyze the source code, and discuss practical use cases.
In this talk, we will explore the concept of lazy loading which involves deferring loading content in order to optimize content delivery and improve website performance. We’ll walk through the process of how to wrap components that we want to lazy load using the open source package “simple-react-intersection-observer”, analyze the source code, and discuss practical use cases.
Five Minutes for JavaScript
Nir Kaufman
A lightening talk about Redux Reducer function, own implementaion and use examples of it .
A lightening talk about Redux Reducer function, own implementaion and use examples of it .
Chat Bots, React, and a Cucumber
Nir Kaufman
During this session, I will live code a fully working chatbot from scratch using React, Redux, and real-world best practices. All that while eating a giant cucumber.
During this session, I will live code a fully working chatbot from scratch using React, Redux, and real-world best practices. All that while eating a giant cucumber.
Rebuilding react-select
Jed Watson
In this talk, Jed is talking about upcoming react-select 2 and his open-source experience.
React London (London, UK)
In this talk, Jed is talking about upcoming react-select 2 and his open-source experience.
React: The Bad Parts
Marcell Cutts (Asgard)
OK sure, over the years React has undoubtably elevated how we craft software to dizzying new heights – but what has it done for us recently? Join Marcel in flicking through his storybook of frustrations where he’ll explore and deconstruct the things that have made him consider hanging up his keyboard and opening a bar instead.
SSR with Next.js and React
Andrico Karoulla (Trint)
What’s SSR is and why is it becoming common practice to use in Web Dev? I’ll you through some easy to digest examples using Next.js. I’ll cover some of Next.js’ great out-of-the-box features.
What’s SSR is and why is it becoming common practice to use in Web Dev? I’ll you through some easy to digest examples using Next.js. I’ll cover some of Next.js’ great out-of-the-box features.
Analytics in a React / Redux SPA
Marton Hipszki
Have you implemented Analytics before in a React / Redux app? Did you find it easy or difficult? How was the collaboration between UI and Analytics folks? Was it simple to scale or a headache? Getting analytics right in a scalable way can be harder than expected. Marton will discuss why analytics is important, how it works end to end and what the challenges we might face along the way are.
Have you implemented Analytics before in a React / Redux app? Did you find it easy or difficult? How was the collaboration between UI and Analytics folks? Was it simple to scale or a headache? Getting analytics right in a scalable way can be harder than expected. Marton will discuss why analytics is important, how it works end to end and what the challenges we might face along the way are.
Container Queries In React
Viktor Hubert
In the advent of reusable components, we should be able to do styling based on the size of a given component. This is where container queries comes in, which offers a simple @media query like syntax. The talk also touches on ResizeObserver, Houdini and the WICG efforts related to this topic.
In the advent of reusable components, we should be able to do styling based on the size of a given component. This is where container queries comes in, which offers a simple @media query like syntax. The talk also touches on ResizeObserver, Houdini and the WICG efforts related to this topic.
Modelling User Friendly Interfaces
Joe Paice
Should that user input hold a String, Integer or Float? Can it be null? What happens if the value is missing? All of these answers often lead to infuriating User Interfaces. In this talk Joe will present an alternative way to think about your UI data model, keep your user interface delightful and maintain data integrity in the back end.
Should that user input hold a String, Integer or Float? Can it be null? What happens if the value is missing? All of these answers often lead to infuriating User Interfaces. In this talk Joe will present an alternative way to think about your UI data model, keep your user interface delightful and maintain data integrity in the back end.
Apollo Client: the stuff no-one ever told ya
Alexey Kureev
Apollo Client is a community-driven GraphQL library that has production-ready bindings for the most popular frameworks including React and React Native. It brings a flexible, easy-to-understand API to orchestrate queries, mutations, subscriptions, caching and much, much more. In this talk we will learn howApollo works under the hood and take a sneak pick on some advanced topics as of optimistic UI, custom links, and manual cache manipulations.
Apollo Client is a community-driven GraphQL library that has production-ready bindings for the most popular frameworks including React and React Native. It brings a flexible, easy-to-understand API to orchestrate queries, mutations, subscriptions, caching and much, much more. In this talk we will learn howApollo works under the hood and take a sneak pick on some advanced topics as of optimistic UI, custom links, and manual cache manipulations.
Avoiding Epic Fails
Elianne Schutze
Using redux-observable and reactive programming for state management and asynchronous operations.
Using redux-observable and reactive programming for state management and asynchronous operations.
Testing React Apps
Alex Lobera (ReactJS.Academy)
Alex has been facinated about testing React since he started using it in 2015. React is a paradigm shift, it’s declarative and FP. Most developers are used to imperative and OOP. Testing React requires us to rethink the way we are used to testing. New tools and techniques like containers and snapshots have come along the way to make testing easier. In this talk Alex will discuss his experience building test suits, and the responsibility developers have to build well-tested, robust production apps.
Alex has been facinated about testing React since he started using it in 2015. React is a paradigm shift, it’s declarative and FP. Most developers are used to imperative and OOP. Testing React requires us to rethink the way we are used to testing. New tools and techniques like containers and snapshots have come along the way to make testing easier. In this talk Alex will discuss his experience building test suits, and the responsibility developers have to build well-tested, robust production apps.
Accelerate your React application
Clément Pasteau (Nvidia)
Have you ever experienced slow React applications? React is a really powerful frontend framework but can quickly degrade the user experience if it is misused. Clément will share with you his past experiences of building projects at Theodo, the mistakes to avoid and the tools to use to hunt down bottlenecks.
ReactJS Dublin (Dublin, Ireland)
Have you ever experienced slow React applications? React is a really powerful frontend framework but can quickly degrade the user experience if it is misused. Clément will share with you his past experiences of building projects at Theodo, the mistakes to avoid and the tools to use to hunt down bottlenecks.
Testing the React Ecosystem and SVGs
Elizabet Oliviera (Optum)
Lamberto Fichera will be talking about testing in the React ecosystem, from unit tests to integration tests.
Elizabet Oliveira will teach us how to create and transform SVG illustrations into components that can be easily customizable and reused in different parts of a product.
React Vienna (Vienna, Austria)
Lamberto Fichera will be talking about testing in the React ecosystem, from unit tests to integration tests.
Elizabet Oliveira will teach us how to create and transform SVG illustrations into components that can be easily customizable and reused in different parts of a product.
styled jsx – Full CSS support for JSX without compromises
Giuseppe Gurgone
Learnings writing a book about Redux
Daniel Bugl (TouchLay)
Daniel Bugl explains the process of writing a tech book and how he wrote a book about Redux and React.
Daniel Bugl explains the process of writing a tech book and how he wrote a book about Redux and React.
The Why’s, How’s, and What’s of npm packaging
Juho Vepsäläinen
Demystifying Babel
Sven Sauleau
We need to talk about Preact
Sara Vieira
OneGraph
Sean Grove (OneGraph)
ReactJS San Francisco Bay Area meetup (San Francisco, CA)
Docusign’s Road to React
Joe Cocco (Docusign)
Migrating to React can be a long road. It is always better to have some tips before initiate this process. This Matters Tech video provides talks of two engineers at Docusign. Joe Cocco and Claudiu Andrei explain the steps of a successful React migration, based on their own experience at Docusign.
They give you the keys of success, but they also explain the issues at scale. Some pros and cons of Reactjs are revealed in this Matters Meetup too. If you plan a journey to react, you must watch this video, because maybe you didn’t think of hurdles you will have to surmount, like how to integrating React into existing applications.
However, there is a lot of benefits migrating to React. For instance, the goal of Docusign was to give developers the tool to move forward. The two engineers will convince you to make the transition to this Javascript Library.
Migrating to React can be a long road. It is always better to have some tips before initiate this process. This Matters Tech video provides talks of two engineers at Docusign. Joe Cocco and Claudiu Andrei explain the steps of a successful React migration, based on their own experience at Docusign.
They give you the keys of success, but they also explain the issues at scale. Some pros and cons of Reactjs are revealed in this Matters Meetup too. If you plan a journey to react, you must watch this video, because maybe you didn’t think of hurdles you will have to surmount, like how to integrating React into existing applications.
However, there is a lot of benefits migrating to React. For instance, the goal of Docusign was to give developers the tool to move forward. The two engineers will convince you to make the transition to this Javascript Library.
10 tips for React Redux At Scale
Baptiste Manson (Matters)
This meetup is meant for developers using Redux. Baptiste Manson, from the Matters Tech team, explains in details the challenges of React Redux at scale.
Learn how to scale your dev team in terms of team cooperation and number of platforms addressed.
Melbourne .NET User Group (Melbourne, Australia)
This meetup is meant for developers using Redux. Baptiste Manson, from the Matters Tech team, explains in details the challenges of React Redux at scale.
Learn how to scale your dev team in terms of team cooperation and number of platforms addressed.
React is Awesome!
Mair Swartz
React has become the latest craze in the developer community. This powerful, flexible yet extremely simple UI framework has been controversial seemingly breaking rules that we have been following for so long.
In this talk we will go through the basics of React and the theory behind how it works. You will see how easy it is to get basic components up and running and finally we will look at a basic application where all the concepts hang together.
React Amsterdam Meetup (Amsterdam, Netherlands)
React has become the latest craze in the developer community. This powerful, flexible yet extremely simple UI framework has been controversial seemingly breaking rules that we have been following for so long.
In this talk we will go through the basics of React and the theory behind how it works. You will see how easy it is to get basic components up and running and finally we will look at a basic application where all the concepts hang together.
Breaking The Silence: Screen Readers and React Apps
Almero Steyn
When you rely on screen reader software to browse the internet, every important app update should be read out to you. However, this is often not the case in React applications, preventing many people from enjoying the awesome apps we make. Almero Steyn will put you in their shoes and then show you how to solve these issues easily and dependably. Many will thank you for it!
Sending Email With React and AWS Lambda
David Baumgold
Rendering templates is slow, and sending transactional email means rendering a LOT of templates. At Impraise, we built a system to handle rendering and sending email templates using AWS Lambda and server-side React. Now, our backend can simply call an API, and let Lambda handle the complicated part, and we’ll gladly share details with you!
Rendering templates is slow, and sending transactional email means rendering a LOT of templates. At Impraise, we built a system to handle rendering and sending email templates using AWS Lambda and server-side React. Now, our backend can simply call an API, and let Lambda handle the complicated part, and we’ll gladly share details with you!
Avoiding D3 Spaghetti With React
Finn Fitzsimons
A fresh look at how React can be used to make reusable, animated visualization components. Finn Fitzsimons will break down the challenges involved and by using the animation performance of D3 combined with declarative nature of React you can create any visualization imaginable in a fraction of the time.
Full Stack Lunch San Diego (San Diego, CA)
A fresh look at how React can be used to make reusable, animated visualization components. Finn Fitzsimons will break down the challenges involved and by using the animation performance of D3 combined with declarative nature of React you can create any visualization imaginable in a fraction of the time.
State of the Redux Union
Mark Erikson
Building a Full Stack Application
Paul Savignano
ReactJS Singapore (Singapore)
React Fibre
Frances Ng
GraphQL React – Simple Practical Approach to GraphQL
Chardy Wang (WireframeApp)
GraphQL is application layer query language that you can use with any backend including SQL, NoSQL, MariaDB, MySQL, MongoDB, Redis, even with REST.
ReactJS Vancouver Meetup (Vancouver, BC)
GraphQL is application layer query language that you can use with any backend including SQL, NoSQL, MariaDB, MySQL, MongoDB, Redis, even with REST.
No-Redux – Automate All Redux Flows
Nan Li
No-redux is a javascript library that automates most of the redux flows, including action creators, reducers and redux middlewares that handle http calls.
This talk is about some ideas and the reasons why I created this library.
React Native Camp (Kyiv, Ukraine)
No-redux is a javascript library that automates most of the redux flows, including action creators, reducers and redux middlewares that handle http calls.
This talk is about some ideas and the reasons why I created this library.
Pushing React Native outside the comfort zone
Raul Gomez Acuna (callstack)
In this talk, we’ll analyse and showcase our experience while building a Music Player using React Native. Given the player specifications, we were challenged to prove that React Native has no limits when it comes to build mobile applications, no matter how complex they are and having performance and cross-platform in mind. We’ll break down the player architecture, covering the different approaches to the problem (Declarative vs Imperative), as well as unveiling all the player elements in a top-down fashion, starting with the music service and the score visualisation and moving further along to smallest pieces such as time progress, progress bar, replay and seeking.
I am not a computer science guy so to speak, but I’ve always been close. Having leant towards telecommunications during my university period, whenever I had some programming classes, I really had a whale of a time. Starting with Android, going through iOS and landing on JavaScript on 2015, I immediately fell in love with React. The beauty of the functional and declarative style that promotes, as well as the shiny announcement of React Native to target mobile platforms using JavaScript, only increased my passion and made me go all-in with it. From that point on, I haven’t looked back and I’ve been building top quality cutting edge web and mobile applications, leading technically and architecturally complex React & Redux projects, mentoring coworkers, sharing knowledge in medium and stackoverflow and contributing to OSS.
In this talk, we’ll analyse and showcase our experience while building a Music Player using React Native. Given the player specifications, we were challenged to prove that React Native has no limits when it comes to build mobile applications, no matter how complex they are and having performance and cross-platform in mind. We’ll break down the player architecture, covering the different approaches to the problem (Declarative vs Imperative), as well as unveiling all the player elements in a top-down fashion, starting with the music service and the score visualisation and moving further along to smallest pieces such as time progress, progress bar, replay and seeking.
I am not a computer science guy so to speak, but I’ve always been close. Having leant towards telecommunications during my university period, whenever I had some programming classes, I really had a whale of a time. Starting with Android, going through iOS and landing on JavaScript on 2015, I immediately fell in love with React. The beauty of the functional and declarative style that promotes, as well as the shiny announcement of React Native to target mobile platforms using JavaScript, only increased my passion and made me go all-in with it. From that point on, I haven’t looked back and I’ve been building top quality cutting edge web and mobile applications, leading technically and architecturally complex React & Redux projects, mentoring coworkers, sharing knowledge in medium and stackoverflow and contributing to OSS.
Offline-first React Native applications in a real world
Pavlo Babenko (Axsy)
Almost every mobile application needs to deal with data. Most likely it’ll need to communicate with the server or API. And for sure – there will be cases when internet connection disappears. In this talk, we’re going to discuss various options how to handle such situations from UI and data manipulation perspectives. And find out what tools does the react community provide for building your next ReactNative app.
Almost every mobile application needs to deal with data. Most likely it’ll need to communicate with the server or API. And for sure – there will be cases when internet connection disappears. In this talk, we’re going to discuss various options how to handle such situations from UI and data manipulation perspectives. And find out what tools does the react community provide for building your next ReactNative app.
I’m software consultant and web developer with a solid web background. My path started from the Rails development six years ago, then went to web frontend (React.js, Ember.js) and for past two years, I’m pioneering ReactNative in our company.
React Native: The dark side of Background tasks
Ferran Negre Pizarro
In this talk we are going to explore how to manage background tasks within your React Native application. Background tasks are essentially tasks that run when the app is not in the foreground. To do so, we need to first understand how background tasks work on iOS and Android because they are essentially different. With that, we can explore different examples on how to perform different tasks. For example, we will see how to play music in the background for both platforms. Moreover, I’d like to show how to fetch data in the background in a real app I wrote. For that, we will explore different libraries that are out there and some that I personally created for this purpose.
I am a Spanish-born front-end engineer and mobile engineer living in Wrocław, Poland for the last 4 years. I used to work as front-end engineer at IBM till I joined Callstack, a growing startup where we specialize in building React Native applications. I am a Software Engineer specialized in building applications using React and React Native. I also have a broad experience building native Android applications. As a personal experience, I built Audio Profiles which has reached 100k downloads in the Google Play Storeand it is still growing. I am currently merging both experiences (web and mobile) to try to bring the best of both worlds to the users. In my free time I basically love building apps, contribute to the open source, write on Medium and I also make sure that developers test their code (preferably with Jest!).
In this talk we are going to explore how to manage background tasks within your React Native application. Background tasks are essentially tasks that run when the app is not in the foreground. To do so, we need to first understand how background tasks work on iOS and Android because they are essentially different. With that, we can explore different examples on how to perform different tasks. For example, we will see how to play music in the background for both platforms. Moreover, I’d like to show how to fetch data in the background in a real app I wrote. For that, we will explore different libraries that are out there and some that I personally created for this purpose.
I am a Spanish-born front-end engineer and mobile engineer living in Wrocław, Poland for the last 4 years. I used to work as front-end engineer at IBM till I joined Callstack, a growing startup where we specialize in building React Native applications. I am a Software Engineer specialized in building applications using React and React Native. I also have a broad experience building native Android applications. As a personal experience, I built Audio Profiles which has reached 100k downloads in the Google Play Storeand it is still growing. I am currently merging both experiences (web and mobile) to try to bring the best of both worlds to the users. In my free time I basically love building apps, contribute to the open source, write on Medium and I also make sure that developers test their code (preferably with Jest!).
React Native bridging into a physical world
Vladimir Novick
Physical world slowly becomes entwined with the web. Today more and more devices are connected to the cloud and controlled by bluetooth low energy. Since our mobile phones are capable of connecting them, more and more apps emerge, which act as controllers for such devices. Smart lightbulbs, Indoor navigation using iBeacons and Physical Web and much more. In this talk we will look into how we can create React Native apps that are capable of such things.
I’m Software Architect and independent consultant, public speaker, co-organizer of ReactJS Israel, Author of “React Native – Build mobile apps with JavaScript” book and several workshops and courses. I bring years of experience in JavaScript ecosystem and is one of early React and React Native adopters. On daily basis I work in Web, Mobile, VR/AR/MR and IoT fields both for customers and on personal projects. Previously I worked in Sports, Gaming & Video industries as Lead Architect & Team Leader.
ReactFest (London, UK)
Physical world slowly becomes entwined with the web. Today more and more devices are connected to the cloud and controlled by bluetooth low energy. Since our mobile phones are capable of connecting them, more and more apps emerge, which act as controllers for such devices. Smart lightbulbs, Indoor navigation using iBeacons and Physical Web and much more. In this talk we will look into how we can create React Native apps that are capable of such things.
I’m Software Architect and independent consultant, public speaker, co-organizer of ReactJS Israel, Author of “React Native – Build mobile apps with JavaScript” book and several workshops and courses. I bring years of experience in JavaScript ecosystem and is one of early React and React Native adopters. On daily basis I work in Web, Mobile, VR/AR/MR and IoT fields both for customers and on personal projects. Previously I worked in Sports, Gaming & Video industries as Lead Architect & Team Leader.
GraphQL Servers in the Browser
David Gomes (MemSQL)
Why would it ever make sense to put a GraphQL server inside a browser? Client-side applications using React should consider this because of how it streamlines application development and solidifies the data – component relationship.
It can also speed up your front-end application if you’re dealing with millions of rows of data because your WebWorker will be dealing with the expensive stuff and your UI’s Main Thread will be free for faster rendering.
In this talk David explains why it makes sense to run GraphQL inside a browser for “pure” client-side applications and how to interact with WebWorkers to achieve this goal.
Why would it ever make sense to put a GraphQL server inside a browser? Client-side applications using React should consider this because of how it streamlines application development and solidifies the data – component relationship.
It can also speed up your front-end application if you’re dealing with millions of rows of data because your WebWorker will be dealing with the expensive stuff and your UI’s Main Thread will be free for faster rendering.
In this talk David explains why it makes sense to run GraphQL inside a browser for “pure” client-side applications and how to interact with WebWorkers to achieve this goal.
Suspense!
Dan Abramov (Facebook)
React + i18n – You Have No Excuse!
Eli Schutze (Trainline)
While about 51% of the world’s websites are in English, only about 25% of web users are English speakers.
With half of the world’s population online, internationalisation is as crucial as ever. In this talk, we’ll explore why all your lame excuses for not internationalising are wrong and how you can get started with i18n today.
While about 51% of the world’s websites are in English, only about 25% of web users are English speakers.
With half of the world’s population online, internationalisation is as crucial as ever. In this talk, we’ll explore why all your lame excuses for not internationalising are wrong and how you can get started with i18n today.
Garbage Collection in Modern Web Applications
Jan Monschke (SoundCloud)
The React + Redux stack has become very popular and in addition with Electron is even used in desktop applications.
Companies are using that stack to build chat clients, email clients and music streaming applications. Building applications for the desktop however comes with its own set of unique problems that usually don’t apply for web applications.
Users will have the app open for a significantly longer period of time than on the web. This means that all of a sudden web developers have to think about memory management.
Redux itself does not come with tools to help you clean up your state but it is very flexible and allows developers to build solutions on top of it.
The React + Redux stack has become very popular and in addition with Electron is even used in desktop applications.
Companies are using that stack to build chat clients, email clients and music streaming applications. Building applications for the desktop however comes with its own set of unique problems that usually don’t apply for web applications.
Users will have the app open for a significantly longer period of time than on the web. This means that all of a sudden web developers have to think about memory management.
Redux itself does not come with tools to help you clean up your state but it is very flexible and allows developers to build solutions on top of it.
State Management in a GraphQL Era
Kitze (ReactAcademy.io)
We’re going to start with exploring the evolution of making a SPA.
Then we’re going to dive into the problem of how fetching, caching, and reading data really complicates state-management and see what approaches we took with different libraries and frameworks like jQuery, Angular, and React.
External state management frameworks like Redux and MobX definitely helped with this problem, especially when the data is fetched from a REST endpoint.
But now that we’re using GraphQL to take care of the data, is an external state-management library even needed?
Can GraphQL coexist with the other state management frameworks? What about server-side rendering? What are the pros and cons of each combination?
We’ll find out what’s the best way to approach this in 2018.
We’re going to start with exploring the evolution of making a SPA.
Then we’re going to dive into the problem of how fetching, caching, and reading data really complicates state-management and see what approaches we took with different libraries and frameworks like jQuery, Angular, and React.
External state management frameworks like Redux and MobX definitely helped with this problem, especially when the data is fetched from a REST endpoint.
But now that we’re using GraphQL to take care of the data, is an external state-management library even needed?
Can GraphQL coexist with the other state management frameworks? What about server-side rendering? What are the pros and cons of each combination?
We’ll find out what’s the best way to approach this in 2018.
Wait, What Happens When My React Native Application Starts?
Nicolas Couvrat http://nicolascouvrat.com
Developing in React Native we often forget that event an simple “hello world” uses almost 1 000 000 lines of code. A non negligible part of it is dedicated to organising its launch, from firing the JavaScript thread to maintaining a “bridge” between JavaScript and native code.
While it might be fine not to worry about it for small applications, bigger developments can benefit from understanding what React Native does under the hood. For example, have you ever wondered what is the meaning behind the usual boilerplate when creating a native component?
After a short overview of the launch phase and threading in React native, we will dive deeper and look at what exactly is hidden behind the “bridge”, before discussing how it allows the creation of native modules usable both from native and JavaScript code.I’m an engineering student from Mines Paristech, France, currently living in New York, and with a strong interest for programming. I’m more specifically focusing on python and javascript. Currently hooked on React & React native!
Developing in React Native we often forget that event an simple “hello world” uses almost 1 000 000 lines of code. A non negligible part of it is dedicated to organising its launch, from firing the JavaScript thread to maintaining a “bridge” between JavaScript and native code.
While it might be fine not to worry about it for small applications, bigger developments can benefit from understanding what React Native does under the hood. For example, have you ever wondered what is the meaning behind the usual boilerplate when creating a native component?
After a short overview of the launch phase and threading in React native, we will dive deeper and look at what exactly is hidden behind the “bridge”, before discussing how it allows the creation of native modules usable both from native and JavaScript code.I’m an engineering student from Mines Paristech, France, currently living in New York, and with a strong interest for programming. I’m more specifically focusing on python and javascript. Currently hooked on React & React native!
How to Draw an Owl
Marcel Cutts (Asgard.tech)
OK! You’ve gotten to grips with JavaScript typing basics, and you want to use them in anger. You see talks with titles like “Pro-functor Lenses” and shrug. You will get to that level but for now you’re just trying to make types help you create something marvellous.
You’e not alone!
We’re going to cruise through building a full-stack application consisting of React, GraphQL, node and ReasonML to demonstrate how to best wield these weapons against real-world web application problems with both confidence and style.
OK! You’ve gotten to grips with JavaScript typing basics, and you want to use them in anger. You see talks with titles like “Pro-functor Lenses” and shrug. You will get to that level but for now you’re just trying to make types help you create something marvellous.
You’e not alone!
We’re going to cruise through building a full-stack application consisting of React, GraphQL, node and ReasonML to demonstrate how to best wield these weapons against real-world web application problems with both confidence and style.
Zero Config GraphQL State Management
Peggy Rayzis (Apollo)
The future of state management in React apps is here!
In this talk, we’ll discuss why GraphQL queries and mutations are a perfect fit for describing what’s happening with our app’s local and remote data.
You’ll also learn how Apollo Client can simplify React state management by eliminating configuration and providing one unified interface to all of your app’s data.
The future of state management in React apps is here!
In this talk, we’ll discuss why GraphQL queries and mutations are a perfect fit for describing what’s happening with our app’s local and remote data.
You’ll also learn how Apollo Client can simplify React state management by eliminating configuration and providing one unified interface to all of your app’s data.
The Dark and Lonely Road to Styling in React
Sara Vieira (YLD)
CSS is hard ! I made a living out of it being hard but when React was introduced we had a whole new level of fighting over CSS, there are so many ways to approach it and so many tradeoffs one can do when choosing the better approach that a talk that will go over these options is more than necessary.
Let’s walk this road together and I promise it will all be fine and you will leave with an idea of type of styling is better for each project.
Hint: There is no perfect way ….
CSS is hard ! I made a living out of it being hard but when React was introduced we had a whole new level of fighting over CSS, there are so many ways to approach it and so many tradeoffs one can do when choosing the better approach that a talk that will go over these options is more than necessary.
Let’s walk this road together and I promise it will all be fine and you will leave with an idea of type of styling is better for each project.
Hint: There is no perfect way ….
Journey Through VR and AR with React
Tomasz Lakomy (Egnyte)
It’s time to leave the 2D world of a browser window and venture into the world of enhanced reality JavaScript applications.
During the talk we’ll see how to make great VR and AR experiences using just your browser and a bit of React, with live demos included, so we’ll get to see them in action!
It’s time to leave the 2D world of a browser window and venture into the world of enhanced reality JavaScript applications.
During the talk we’ll see how to make great VR and AR experiences using just your browser and a bit of React, with live demos included, so we’ll get to see them in action!
An Introduction to Redux Saga: Side Effects Made Easier
Sophie Koonin (John Lewis)
Not to be confused with insurance policies for the over 50s, redux-saga is a super handy library for managing side effects (such as API calls) in your React app. When used in conjunction with Redux it’s a powerful way to fetch data into the state while your main application is executing.
Whether or not you’ve used the saga pattern or related libraries before, this talk will explain what sagas are, how they work, what they’re useful for and – the icing on the cake – just how easy they are to test (especially compared to some of the alternatives out there such as redux-thunk).
The talk is pitched at developers who are comfortable with React and have at least a baseline knowledge of what Redux does.
Not to be confused with insurance policies for the over 50s, redux-saga is a super handy library for managing side effects (such as API calls) in your React app. When used in conjunction with Redux it’s a powerful way to fetch data into the state while your main application is executing.
Whether or not you’ve used the saga pattern or related libraries before, this talk will explain what sagas are, how they work, what they’re useful for and – the icing on the cake – just how easy they are to test (especially compared to some of the alternatives out there such as redux-thunk).
The talk is pitched at developers who are comfortable with React and have at least a baseline knowledge of what Redux does.
Productive React Development
Stephanie Siaw (ThoughtWorks)
What are the secrets to productivity for a React developer? Could you be faster and happier while building components?
From Stephanie’s experiences working on React/Redux projects that have lasted from days to years, she will share some of the tools, work environments and teams that have worked best.
What are the secrets to productivity for a React developer? Could you be faster and happier while building components?
From Stephanie’s experiences working on React/Redux projects that have lasted from days to years, she will share some of the tools, work environments and teams that have worked best.
Taming the Beast How to Tame React and GraphQL
Susanna Wong (CNN)
While the React stack and its many third party tools are powerful Beasts, as a React developer we often find ourselves trapped within errors ( webpack errors anyone?) that are the main cause of frustrations in our day to day work.
This talk mainly focuses on going through some of the common development errors, peeling through the underlying principles of React, GraphQL and webpack in better understanding how we could tame those three beasts and be a master of our tools.
While the React stack and its many third party tools are powerful Beasts, as a React developer we often find ourselves trapped within errors ( webpack errors anyone?) that are the main cause of frustrations in our day to day work.
This talk mainly focuses on going through some of the common development errors, peeling through the underlying principles of React, GraphQL and webpack in better understanding how we could tame those three beasts and be a master of our tools.
We Need To Talk About Our Frontend Workflow
Siddharth Kshetrapal (Auth0)
Building high quality interfaces that are consistent across products is hard. Fear not, Design Systems with React is the solution!
Reactathon (San Francisco, CA)
Building high quality interfaces that are consistent across products is hard. Fear not, Design Systems with React is the solution!
Reactathon 2018 Kickoff
Brian Douglas (Netlify)
React revolutionized the way we build modern user interfaces. But before it took off, it was built to solve a few key problems when building apps for the web. In this short talk, we’ll learn what those problems were and how React approached solving them.
React revolutionized the way we build modern user interfaces. But before it took off, it was built to solve a few key problems when building apps for the web. In this short talk, we’ll learn what those problems were and how React approached solving them.
Why React?
Ben Ilegbodu (Eventbrite)
As the Frontend Platform team at Eventbrite switched from Backbone/Marionette over to React, it had to convince other developers, managers, directors, and non-engineers that React was the right path. And the rationale for moving wasn’t just because React is insanely popular. There are many tangible benefits that make the effort of migrating worthwhile. New to React and want to learn a little about how it works? Seeking ammunition to convince your team to make the change? Come learn about why we made the decision to transition to React, through an introduction of how to build user interactions with React.
Ben is a Christian, a husband and a father of 2 with 10+ years of experience developing user interfaces for the Web. He currently leads and manages Eventbrite’s Frontend Platform team. On the side, Ben also enjoys playing basketball, DIY, watching movies, and blogging. He blogs at (benmvp.com) and tweets (@benmvp) about his experiences with new web technologies.
As the Frontend Platform team at Eventbrite switched from Backbone/Marionette over to React, it had to convince other developers, managers, directors, and non-engineers that React was the right path. And the rationale for moving wasn’t just because React is insanely popular. There are many tangible benefits that make the effort of migrating worthwhile. New to React and want to learn a little about how it works? Seeking ammunition to convince your team to make the change? Come learn about why we made the decision to transition to React, through an introduction of how to build user interactions with React.
Ben is a Christian, a husband and a father of 2 with 10+ years of experience developing user interfaces for the Web. He currently leads and manages Eventbrite’s Frontend Platform team. On the side, Ben also enjoys playing basketball, DIY, watching movies, and blogging. He blogs at (benmvp.com) and tweets (@benmvp) about his experiences with new web technologies.
Why I Love JSX!
Jay Phelps (Netflix)
JSX is an XML-like syntax extension to JavaScript, popularized by React. When seen for the first time it can often elicit bad memories of intermixing HTML and code, but JSX is *very* different! Let’s learn exactly what it is, how it works, and even how you can use it outside of React.
Reactive programming nut and compiler enthusiast. Jay is a Senior Software Engineer at Netflix. Lover of all things open source, his contributions span numerous ecosystems. Former RxJS core team member and author of core-decorators, git-blame-someone-else, and co-author of redux-observable.
JSX is an XML-like syntax extension to JavaScript, popularized by React. When seen for the first time it can often elicit bad memories of intermixing HTML and code, but JSX is *very* different! Let’s learn exactly what it is, how it works, and even how you can use it outside of React.
Reactive programming nut and compiler enthusiast. Jay is a Senior Software Engineer at Netflix. Lover of all things open source, his contributions span numerous ecosystems. Former RxJS core team member and author of core-decorators, git-blame-someone-else, and co-author of redux-observable.
From Imperative to Declarative
Feather Knee (Nvidia)
There are often many ways to solve the same problem. This talk explores two different approaches, imperative and declarative. We will look at code samples and discuss the relative merits of each, starting with vanilla JS then moving to more concrete examples in JSX.
Feather started her career at Accenture as a technical consultant in various Silicon Valley companies including Sun Microsystems, Robert Half, and Electronic Arts. She went on to work as a Java developer for various startups that didn’t survive the first dot.com meltdown. After this she left the tech world to have a career as a working artist for several years. She returned to teach a web development bootcamp in both NYC and SF for General Assembly. She then went on to work as a full stack developer at Netflix for the next few years, and is now a front end developer at Nvidia. She lives in San Jose with her partner and the cutest dog on earth.
There are often many ways to solve the same problem. This talk explores two different approaches, imperative and declarative. We will look at code samples and discuss the relative merits of each, starting with vanilla JS then moving to more concrete examples in JSX.
Feather started her career at Accenture as a technical consultant in various Silicon Valley companies including Sun Microsystems, Robert Half, and Electronic Arts. She went on to work as a Java developer for various startups that didn’t survive the first dot.com meltdown. After this she left the tech world to have a career as a working artist for several years. She returned to teach a web development bootcamp in both NYC and SF for General Assembly. She then went on to work as a full stack developer at Netflix for the next few years, and is now a front end developer at Nvidia. She lives in San Jose with her partner and the cutest dog on earth.
CSS in React
Joe Seifi (Eventbrite)
React has no standard way to style components. A slew of ideas and frameworks have grown out of the community. But, with so many CSS in JS solutions, how do you know which one to choose? In this talk, I will cover five different ways to style your React projects, and the pros and cons of each approach. From CSS Modules with SASS to Styled Components, you’ll learn how each library works so that you know which one(s) best fits your needs.
Joe Seifi is a senior software engineer at Eventbrite in San Francisco. Previously he worked at Trulia, Apple, and Disney on various web projects.
React has no standard way to style components. A slew of ideas and frameworks have grown out of the community. But, with so many CSS in JS solutions, how do you know which one to choose? In this talk, I will cover five different ways to style your React projects, and the pros and cons of each approach. From CSS Modules with SASS to Styled Components, you’ll learn how each library works so that you know which one(s) best fits your needs.
Joe Seifi is a senior software engineer at Eventbrite in San Francisco. Previously he worked at Trulia, Apple, and Disney on various web projects.
Data Visualizations with React + D3
Swizec Teller (Yup Technologies)
React can make your D3 amazing. Want to animate 20,000 elements with React? I’ll show you. Want to build a complex dataviz? You’ll know how. Want to write maintainable dataviz components that you can reuse in any project? I gotchu, fam. This talk shows you everything I’ve learned about creating reusable and maintainable graphical components over 3 years of hammering away at the question: ‘Jeez D3 sure is hard to learn, how do we make this easier?’
Hi I’m Swizec, a geek with a hat. Rumor has it my bird is more popular these days than my hat I’ve made some books and courses on web development and working on more. Been doing JavaScript since before jQuery was cool and building my first React component back in 2015 blew my mind.
React can make your D3 amazing. Want to animate 20,000 elements with React? I’ll show you. Want to build a complex dataviz? You’ll know how. Want to write maintainable dataviz components that you can reuse in any project? I gotchu, fam. This talk shows you everything I’ve learned about creating reusable and maintainable graphical components over 3 years of hammering away at the question: ‘Jeez D3 sure is hard to learn, how do we make this easier?’
Hi I’m Swizec, a geek with a hat. Rumor has it my bird is more popular these days than my hat I’ve made some books and courses on web development and working on more. Been doing JavaScript since before jQuery was cool and building my first React component back in 2015 blew my mind.
The Fundamentals of Redux
Mark Erikson (Northrop Grumman)
Redux is the most widely-used state management library for React applications, and has spread throughout the Javascript ecosystem. However, the learning curve can be steep for many people. Come join Redux co-maintainer Mark Erikson as we talk about the core concepts of Redux, how to use Redux with React, and how Redux was designed to make Javascript applications predictable.
Mark is a software engineer living in southwest Ohio, USA, where he patiently awaits the annual heartbreak from the Reds and the Bengals. Mark is a Redux maintainer, author of the Redux FAQ, maintains the React/Redux Links list and Redux Addons Catalog, tweets at @acemarke, and blogs at http://blog.isquaredsoftware.com. He can be usually found in the Reactiflux chat channels, answering questions about React and Redux.
Redux is the most widely-used state management library for React applications, and has spread throughout the Javascript ecosystem. However, the learning curve can be steep for many people. Come join Redux co-maintainer Mark Erikson as we talk about the core concepts of Redux, how to use Redux with React, and how Redux was designed to make Javascript applications predictable.
Mark is a software engineer living in southwest Ohio, USA, where he patiently awaits the annual heartbreak from the Reds and the Bengals. Mark is a Redux maintainer, author of the Redux FAQ, maintains the React/Redux Links list and Redux Addons Catalog, tweets at @acemarke, and blogs at http://blog.isquaredsoftware.com. He can be usually found in the Reactiflux chat channels, answering questions about React and Redux.
an iOS Developer’s Opinion of React Native
Harry Tormey (Launchdrawer)
The promise of writing code for iOS and having it “just work” out of the box on Android is a tempting one. That along with hot reloading code and the ability to push over the air updates to published apps make React Native a tempting proposition. This sounds too good to be true so what’s the catch? React Native is a framework for building native apps using Javascript. Many native developers rightly associate hybrid Javascript apps with disappointing consumer experiences and frustrating development environments. Over the years the same promises have been made by many other Javascript based frameworks, so why is React Native any different? This talk will be from the perspective of an experienced iOS developer who has been working with React Native for the last 2 years and has shipped several cross platform apps with it.
Harry is an iOS developer who is very enthusiastic about React Native. Currently he works as a mobile contractor with various companies. In the past he’s worked as a Software Engineer at Facebook, Apple and a number of startups you’ve probably never heard of.
Harry is an iOS developer who is very enthusiastic about React Native. Currently he works as a mobile contractor with various companies. In the past he’s worked as a Software Engineer at Facebook, Apple and a number of startups you’ve probably never heard of.
Intro to GraphQL
Jon Wong (Coursera)
GraphQL is a declarative query language that is revolutionizing how we think about the data in our applications — it helps make accessing APIs from both the client and the server an absolute breeze. Come learn the basics of GraphQL and how you can use it today!
Jon is an engineer on the Frontend Infrastructure team at Coursera where he works to help developers focus on the problem at hand: building a world-class learning experience! He’s been using GraphQL for over a year and loves using it for every product he builds and is looking forward to share the joy of GraphQL with as many people as he can!
GraphQL is a declarative query language that is revolutionizing how we think about the data in our applications — it helps make accessing APIs from both the client and the server an absolute breeze. Come learn the basics of GraphQL and how you can use it today!
Jon is an engineer on the Frontend Infrastructure team at Coursera where he works to help developers focus on the problem at hand: building a world-class learning experience! He’s been using GraphQL for over a year and loves using it for every product he builds and is looking forward to share the joy of GraphQL with as many people as he can!
The Client-Side Revolution, Brought to You by React
Kyle Mathews (Gatsby)
Building websites has changed dramatically over the last few years. In this session we’ll go on a history trip to discover where we came from, why React is a such a big deal, and where we might be going soon. We’ll discuss what a website is and why we use the tools we do to build them and how this is the best of all times to be building for the web.
Kyle is a tech entrepreneur based in San Francisco, CA. He’s founded several startups and is now helping build a next generation open source JavaScript website framework called Gatsby that blends the speed and simplicity of static sites with the rich tooling and client-side capabilities of React.js.
Building websites has changed dramatically over the last few years. In this session we’ll go on a history trip to discover where we came from, why React is a such a big deal, and where we might be going soon. We’ll discuss what a website is and why we use the tools we do to build them and how this is the best of all times to be building for the web.
Kyle is a tech entrepreneur based in San Francisco, CA. He’s founded several startups and is now helping build a next generation open source JavaScript website framework called Gatsby that blends the speed and simplicity of static sites with the rich tooling and client-side capabilities of React.js.
Why Serverless Architecture is Changing Software Development
David Wells (Serverless)
The ‘Serverless Architecture’ has become massively popular this year, and for the right reasons. It’s zero-administration nature and pay-per-execution pricing model enable developers to manage less infrastructure and build more than ever. So what are developers actually building with it? David will explore different use cases for building microservices with Serverless technology. The talk will include real world serverless examples from companies & the open source world.
David Wells is a full stack developer at Serverless, Inc. in San Francisco. He is passionate about developer experience and creating products that are powerful and easy to use. His previous roles include lead UI/UX developer at Mulesoft and founder of Inbound Now, an open source marketing software platform. He specialized in Full stack JavaScript, HTML, CSS, Marketing, & UI/ UX.
The ‘Serverless Architecture’ has become massively popular this year, and for the right reasons. It’s zero-administration nature and pay-per-execution pricing model enable developers to manage less infrastructure and build more than ever. So what are developers actually building with it? David will explore different use cases for building microservices with Serverless technology. The talk will include real world serverless examples from companies & the open source world.
David Wells is a full stack developer at Serverless, Inc. in San Francisco. He is passionate about developer experience and creating products that are powerful and easy to use. His previous roles include lead UI/UX developer at Mulesoft and founder of Inbound Now, an open source marketing software platform. He specialized in Full stack JavaScript, HTML, CSS, Marketing, & UI/ UX.
React & the JAMstack
Matt Biilmann (Netlify)
Matt is regarded as one of the driving forces behind the resurgence of static websites and is a founder at Netlify, the fastest growing automation platform for modern websites. Matt has lead the development of all of 3 commercial CMS (swears he won’t do a fourth), has written production code in more than a dozen programming languages, is trilingual and enjoys listening to beer and drinking modern jazz.
Matt is regarded as one of the driving forces behind the resurgence of static websites and is a founder at Netlify, the fastest growing automation platform for modern websites. Matt has lead the development of all of 3 commercial CMS (swears he won’t do a fourth), has written production code in more than a dozen programming languages, is trilingual and enjoys listening to beer and drinking modern jazz.
Welcome to Reactathon
Brian Douglas (Netlify)
It’s been quite a year for React! In this short talk, we’ll cover a few of the highlights — following Brian’s welcome to the conference.
It’s been quite a year for React! In this short talk, we’ll cover a few of the highlights — following Brian’s welcome to the conference.
Building a self-documenting component library for your company
David Wells (Serverless)
Design systems are an extremely efficient way to scale out a scalable frontend solution across multiple teams in a large (or growing) organization. Come and learn how to building an internal component library & design system can help your company ship and iterate faster. This talk will cover how David has built multiple design systems and will run through the protips and pitfalls learned along the way. TLDR; It’s easier than you think to create a scalable, maintainable UI library + Design system with React.
David Wells is a full stack developer at Serverless, Inc. in San Francisco. He is passionate about developer experience and creating products that are powerful and easy to use. His previous roles include lead UI/UX developer at Mulesoft and founder of Inbound Now, an open source marketing software platform. He specialized in Full stack JavaScript, HTML, CSS, Marketing, & UI/ UX.
Design systems are an extremely efficient way to scale out a scalable frontend solution across multiple teams in a large (or growing) organization. Come and learn how to building an internal component library & design system can help your company ship and iterate faster. This talk will cover how David has built multiple design systems and will run through the protips and pitfalls learned along the way. TLDR; It’s easier than you think to create a scalable, maintainable UI library + Design system with React.
David Wells is a full stack developer at Serverless, Inc. in San Francisco. He is passionate about developer experience and creating products that are powerful and easy to use. His previous roles include lead UI/UX developer at Mulesoft and founder of Inbound Now, an open source marketing software platform. He specialized in Full stack JavaScript, HTML, CSS, Marketing, & UI/ UX.
React, Powered by WebAssembly
Jay Phelps
WebAssembly (aka wasm) is a new, standardized compilation target for the web, available in all modern browsers. But since it’s so low level it can be difficult to see how it will revolutionize the future generations of React apps and potentially even power React itself. In this talk Jay will reveal what it is, how you can use it today, and the incredible opportunities it will continue to unlock.
Reactive programming nut and compiler enthusiast. Jay is a Senior Software Engineer at Netflix. Lover of all things open source, his contributions span numerous ecosystems. Former RxJS core team member and author of core-decorators, git-blame-someone-else, and co-author of redux-observable.
WebAssembly (aka wasm) is a new, standardized compilation target for the web, available in all modern browsers. But since it’s so low level it can be difficult to see how it will revolutionize the future generations of React apps and potentially even power React itself. In this talk Jay will reveal what it is, how you can use it today, and the incredible opportunities it will continue to unlock.
Reactive programming nut and compiler enthusiast. Jay is a Senior Software Engineer at Netflix. Lover of all things open source, his contributions span numerous ecosystems. Former RxJS core team member and author of core-decorators, git-blame-someone-else, and co-author of redux-observable.
Sharing Code between React and React Native
Erica Cooksey (Eaze)
Many companies use React JS for their website and would like to reuse that code in their mobile apps. This talk will cover identifying the best candidates for shared code, sharing both UI components and UI-less business logic, and using React Native in both greenfield and brownfield apps.
After working for large companies including Amazon and WalmartLabs, Erica joined Eaze as the first Android engineer. She is excited about building Eaze’s mobile technology from the ground up! Erica lives in San Jose and spends most of her free time training and competing in powerlifting and Brazilian jiu jitsu.
Many companies use React JS for their website and would like to reuse that code in their mobile apps. This talk will cover identifying the best candidates for shared code, sharing both UI components and UI-less business logic, and using React Native in both greenfield and brownfield apps.
After working for large companies including Amazon and WalmartLabs, Erica joined Eaze as the first Android engineer. She is excited about building Eaze’s mobile technology from the ground up! Erica lives in San Jose and spends most of her free time training and competing in powerlifting and Brazilian jiu jitsu.
The future of backend development: Serverless GraphQL
Johannes Schickling (GraphCool)
Using GraphQL APIs is by now the default for most React developers. But how does a GraphQL backend actually work? This talk gives an overview over modern backend development using GraphQL and the benefits of serverless deployment workflow.
Johannes is CEO and co-founder of Graphcool/Prisma (GraphQL database proxy) and is currently based in SF & Berlin. He previously built and sold the VR company “Optonaut”. Johannes loves cutting-edge technologies and was one of the first adopters of Docker, React & GraphQL.
Using GraphQL APIs is by now the default for most React developers. But how does a GraphQL backend actually work? This talk gives an overview over modern backend development using GraphQL and the benefits of serverless deployment workflow.
Johannes is CEO and co-founder of Graphcool/Prisma (GraphQL database proxy) and is currently based in SF & Berlin. He previously built and sold the VR company “Optonaut”. Johannes loves cutting-edge technologies and was one of the first adopters of Docker, React & GraphQL.
Vertical Redux Architecture
Berkeley Martinez (freeCodeCamp)
At freeCodeCamp, we’ve built a large Redux app with lots of moving parts. But building large scale Redux apps can get quite frustrating. In this talk we’ll cover some rules to mitigate common issues seen in large apps, structural guidelines inspired by Clojure(Script) frameworks, and Redux theory of actions as events that help keep your large app transparent and manageable.
Berkeley is a San Francisco native and the CTO of freeCodeCamp.org, where students learn full-stack web development for free. He is also the author of Redux-Epic, a library built to do better async and server-side rendering in React with RxJS Observables. Previously, Berkeley worked as a professional consultant and instructor with Real World Reacton and over two years trained engineers from Twilio, Amazon, OpenTable, Pinterest, Netflix, and more.
At freeCodeCamp, we’ve built a large Redux app with lots of moving parts. But building large scale Redux apps can get quite frustrating. In this talk we’ll cover some rules to mitigate common issues seen in large apps, structural guidelines inspired by Clojure(Script) frameworks, and Redux theory of actions as events that help keep your large app transparent and manageable.
Berkeley is a San Francisco native and the CTO of freeCodeCamp.org, where students learn full-stack web development for free. He is also the author of Redux-Epic, a library built to do better async and server-side rendering in React with RxJS Observables. Previously, Berkeley worked as a professional consultant and instructor with Real World Reacton and over two years trained engineers from Twilio, Amazon, OpenTable, Pinterest, Netflix, and more.
Motion in JavaScript
Kaylie Kwon (Eventbrite)
You may have heard of CSS in JS, but what alternatives are there for implementing interactive motions in JS? This talk will be a comparison of several approaches from using vanilla Javascript to libraries like Anime.js and Popmotion, as well as ones in React ecosystem like React Transition Group and React Motion.
Kaylie is a frontend engineer at Eventbrite from San Francisco, who loves all things related to devtools and open source.
You may have heard of CSS in JS, but what alternatives are there for implementing interactive motions in JS? This talk will be a comparison of several approaches from using vanilla Javascript to libraries like Anime.js and Popmotion, as well as ones in React ecosystem like React Transition Group and React Motion.
Kaylie is a frontend engineer at Eventbrite from San Francisco, who loves all things related to devtools and open source.
Serverless-Side Rendering with AWS and Parcel.js
Brian Leroux (Begin.com)
Brian is a former member of the Adobe PhoneGap team and helped to foster the Apache Cordova project. He is also responsible for wtfjs. Lately he has been botbuilding on the cloud with begin.com and hacking on Architect (https://arc.codes), a project of the JavaScript Foundation (JSF).
Brian is a former member of the Adobe PhoneGap team and helped to foster the Apache Cordova project. He is also responsible for wtfjs. Lately he has been botbuilding on the cloud with begin.com and hacking on Architect (https://arc.codes), a project of the JavaScript Foundation (JSF).
Advanced Web Performance Optimizations
Kyle Mathews (Gatsby)
As web developers, we have incredible demands placed upon us. Expectations for the quality of websites are remarkably high, and continue to rise. Not only must websites be feature-rich and robust, they must load and run quickly on a near-infinite variety of devices and browsers all around the world. Oh, and do it with limited team members on an aggressive timeline. Come join Kyle Mathews, founder of Gatsby, as he talks about modern web performance. You’ll learn the tools & techniques you can start using today to make your React sites super fast. We’ll discuss code splitting, “link preload”, greedy prefetching, header optimizations, service workers, and more using Gatsby as a case study for these techniques.
Kyle is a tech entrepreneur based in San Francisco, CA. He’s founded several startups and is now helping build a next generation open source JavaScript website framework called Gatsby that blends the speed and simplicity of static sites with the rich tooling and client-side capabilities of React.js.
As web developers, we have incredible demands placed upon us. Expectations for the quality of websites are remarkably high, and continue to rise. Not only must websites be feature-rich and robust, they must load and run quickly on a near-infinite variety of devices and browsers all around the world. Oh, and do it with limited team members on an aggressive timeline. Come join Kyle Mathews, founder of Gatsby, as he talks about modern web performance. You’ll learn the tools & techniques you can start using today to make your React sites super fast. We’ll discuss code splitting, “link preload”, greedy prefetching, header optimizations, service workers, and more using Gatsby as a case study for these techniques.
Kyle is a tech entrepreneur based in San Francisco, CA. He’s founded several startups and is now helping build a next generation open source JavaScript website framework called Gatsby that blends the speed and simplicity of static sites with the rich tooling and client-side capabilities of React.js.
GraphQL Outside the Box
Tyler Martinez (Docker)
At Docker, we are using GraphQL alongside our existing REST APIs and making it work without a GraphQL server. Instead, we use GraphQL client side, where it serves as the interface to our network layer and the glue that binds our components together. We have taken this approach as a progressive solution to the difficult problem of introducing GraphQL to an existing application stack. By breaking the rules a bit we gain many of the benefits that GraphQL provides immediately while spreading out the implementation over many releases. While a novel approach I also envision a future where running GraphQL on the client is not uncommon. With the advent of blockchain technology and the concept of “dapps” we must reconsider the role of the application that runs on the end user’s device. By running GraphQL on the client we can consume remote GraphQL services, interact directly with the blockchain, browser / native APIs, and more through GraphQL.
Tyler is an engineer at Docker working on UI applications. When not writing code you can find him at a beach near his home in San Francisco.
At Docker, we are using GraphQL alongside our existing REST APIs and making it work without a GraphQL server. Instead, we use GraphQL client side, where it serves as the interface to our network layer and the glue that binds our components together. We have taken this approach as a progressive solution to the difficult problem of introducing GraphQL to an existing application stack. By breaking the rules a bit we gain many of the benefits that GraphQL provides immediately while spreading out the implementation over many releases. While a novel approach I also envision a future where running GraphQL on the client is not uncommon. With the advent of blockchain technology and the concept of “dapps” we must reconsider the role of the application that runs on the end user’s device. By running GraphQL on the client we can consume remote GraphQL services, interact directly with the blockchain, browser / native APIs, and more through GraphQL.
Tyler is an engineer at Docker working on UI applications. When not writing code you can find him at a beach near his home in San Francisco.
Connecting a React Front-end to an Ethereum Smart Contract
Zubair Ahmed
Learn how to leverage the front-end skills you already know to connect to a smart contract and deploy to the Ethereum blockchain. We’ll cover a brief introduction to Solidity, the Ethereum smart contract programming language (similar to JavaScript), and discuss the tools you need create a smart contract on the Ethereum blockchain. We’ll also learn how to use web-based blockchain intermediaries such as Metamask.
Zubair is a software engineer with Oakland Blockchain Developers and the CTO of GIVE. He specializes in Solidity, Web3.js, Remix, Truffle, IPFS, geth, and smart contract security. He also loves building the front-end of his dApps with React, and is excited to share his insight on building for Ethereum.
Learn how to leverage the front-end skills you already know to connect to a smart contract and deploy to the Ethereum blockchain. We’ll cover a brief introduction to Solidity, the Ethereum smart contract programming language (similar to JavaScript), and discuss the tools you need create a smart contract on the Ethereum blockchain. We’ll also learn how to use web-based blockchain intermediaries such as Metamask.
Zubair is a software engineer with Oakland Blockchain Developers and the CTO of GIVE. He specializes in Solidity, Web3.js, Remix, Truffle, IPFS, geth, and smart contract security. He also loves building the front-end of his dApps with React, and is excited to share his insight on building for Ethereum.
Day 2 Keynote
Parashuram Narasimhan (Facebook)
Parashuram is a front end engineer on the React Native Core team. Most of his work has been around organizing the next set of investments that should be made to ensure React Native continues to support its open source work. He has contributed to Maya-kai, a gesture mirroring system for RN, CodePush, Mobile Center (now App Center), and also wrote the VSCode RN debugger, among others.
Parashuram is a front end engineer on the React Native Core team. Most of his work has been around organizing the next set of investments that should be made to ensure React Native continues to support its open source work. He has contributed to Maya-kai, a gesture mirroring system for RN, CodePush, Mobile Center (now App Center), and also wrote the VSCode RN debugger, among others.
Charts from Scratch in React
Christina Holland (Pepperdata)
With all the great charting libraries out there, why would you want to roll your own charts from scratch? Sometimes you want more control, or your use case is so simple you can avoid bringing in an unneeded dependency, or maybe you just want to strip away the magic for a moment and learn how the browser’s drawing APIs really work. We’ll go over some examples of building charts with basic HTML, SVG and Canvas.
Christina works on the dashboard team at Pepperdata, building apps to help users get a handle on what’s going on with their complex distributed systems. This is her third career after biotech and animation. She likes elegant puzzle solutions, pretty and intuitive UI, and data visualizations that make complex things simple.
With all the great charting libraries out there, why would you want to roll your own charts from scratch? Sometimes you want more control, or your use case is so simple you can avoid bringing in an unneeded dependency, or maybe you just want to strip away the magic for a moment and learn how the browser’s drawing APIs really work. We’ll go over some examples of building charts with basic HTML, SVG and Canvas.
Christina works on the dashboard team at Pepperdata, building apps to help users get a handle on what’s going on with their complex distributed systems. This is her third career after biotech and animation. She likes elegant puzzle solutions, pretty and intuitive UI, and data visualizations that make complex things simple.
A Postgres-backed GraphQL BAAS
Tanmai Gopal (hasura.io)
A review of how we created a GraphQL backend backed by Postgres. The key challenges faced by real-world apps and our solution approach, specifically around expressive query arguments, access control, schema iteration, sharing auth between multiple API backends. We will also review some quick tips to make the most out of Postgres and reveal some early performance benchmarks. We will end with a demo how you can create complex data models and make intuitive graphql queries from your app without requiring in-depth knowledge of graphql schemas.
Tanmai is the co-founder of hasura.io – a Postgres BaaS + Kubernetes PaaS. He is a StackOverflow powered fullstack, polyglot developer whose areas of interest and work span react, nodejs, python, haskell, docker, postgres, kubernetes. He is passionate about making the power of building things accessible to everyone and is the instructor of India’s largest MOOC imad.tech with over 200,000 students. You will occasionally see him speaking, or more often being quietly awkward, at conferences and meetups. He has recently moved to spend time in the Bay Area, just like everyone else.
A review of how we created a GraphQL backend backed by Postgres. The key challenges faced by real-world apps and our solution approach, specifically around expressive query arguments, access control, schema iteration, sharing auth between multiple API backends. We will also review some quick tips to make the most out of Postgres and reveal some early performance benchmarks. We will end with a demo how you can create complex data models and make intuitive graphql queries from your app without requiring in-depth knowledge of graphql schemas.
Tanmai is the co-founder of hasura.io – a Postgres BaaS + Kubernetes PaaS. He is a StackOverflow powered fullstack, polyglot developer whose areas of interest and work span react, nodejs, python, haskell, docker, postgres, kubernetes. He is passionate about making the power of building things accessible to everyone and is the instructor of India’s largest MOOC imad.tech with over 200,000 students. You will occasionally see him speaking, or more often being quietly awkward, at conferences and meetups. He has recently moved to spend time in the Bay Area, just like everyone else.
Type-safe React with ReasonML
Jared Forsyth (Khan Academy)
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.
Jared interned on the React Native team, rewrote the React devtools, and has given several talks on React & related technologies. He works at Khan Academy on the mobile team, using React Native along side native Java and Swift. He loves type systems and learning new languages, and is deeply invested in improving the experience of programming for everyone.
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.
Jared interned on the React Native team, rewrote the React devtools, and has given several talks on React & related technologies. He works at Khan Academy on the mobile team, using React Native along side native Java and Swift. He loves type systems and learning new languages, and is deeply invested in improving the experience of programming for everyone.
React off the Grid!
Sophia Shoemaker (Fullstack.io)
Creating a React application for orphans in Ghana offered some unique challenges. Progressive Web Apps (PWAs) are more than just “cool” or “hip” — they can be really important for applications where the internet is spotty, if available at all. Learn why I chose React + AWS Lambda for a country with poor internet connectivity, and general lessons on the often messy and exciting world of creating offline applications.
Sophia became addicted to React in 2014. She is a full stack developer but React is her technology of choice. When she isn’t cobbling code, she can be found editing the Fullstack React Newsletter, flying in her husband’s Beechcraft Bonanza and playing with her 2 kids. Connect with Sophia on Twitter at @wisecobbler.
Creating a React application for orphans in Ghana offered some unique challenges. Progressive Web Apps (PWAs) are more than just “cool” or “hip” — they can be really important for applications where the internet is spotty, if available at all. Learn why I chose React + AWS Lambda for a country with poor internet connectivity, and general lessons on the often messy and exciting world of creating offline applications.
Sophia became addicted to React in 2014. She is a full stack developer but React is her technology of choice. When she isn’t cobbling code, she can be found editing the Fullstack React Newsletter, flying in her husband’s Beechcraft Bonanza and playing with her 2 kids. Connect with Sophia on Twitter at @wisecobbler.
Jest as a Platform
Rogelio Guzman (Docker)
Jest is a testing framework that has a big emphasize on development experience. We will talk about how Jest can become a platform and how you can leverage it to enhance your existing tooling. Putting your tool on top of Jest, allows you to benefit from its infrastructure, which provides a watch mode, Git integration, etc.
Rogelio is an engineer at Docker. He loves to code and is part of the Jest core team.
Jest is a testing framework that has a big emphasize on development experience. We will talk about how Jest can become a platform and how you can leverage it to enhance your existing tooling. Putting your tool on top of Jest, allows you to benefit from its infrastructure, which provides a watch mode, Git integration, etc.
Rogelio is an engineer at Docker. He loves to code and is part of the Jest core team.
Incremental Migration to GraphQL
Sashko Stubailo (Apollo)
GraphQL is quickly becoming mainstream as one of the best ways to get data into your React application. When we see people modernize their app architecture and move to React, they often want to migrate their API to GraphQL as part of the same effort. But while React is super easy to adopt in a small part of your app at a time, GraphQL can seem like a much larger investment. In this talk, we’ll go over the fastest and most effective ways for React developers to incrementally migrate their existing APIs and backends to GraphQL, then talk about opportunities for improvement in the space. If you’re using React and are interested in GraphQL, but are looking for an extra push to get it up and running at your company, this is the talk for you!
Sashko has been working on open source developer tools for the last 5 years. Most recently he has been leading open source GraphQL tool development at Apollo, after writing the very first versions of Apollo Client. Previously, he has worked on JavaScript build tooling, reactive UI frameworks, and data visualization.
GraphQL is quickly becoming mainstream as one of the best ways to get data into your React application. When we see people modernize their app architecture and move to React, they often want to migrate their API to GraphQL as part of the same effort. But while React is super easy to adopt in a small part of your app at a time, GraphQL can seem like a much larger investment. In this talk, we’ll go over the fastest and most effective ways for React developers to incrementally migrate their existing APIs and backends to GraphQL, then talk about opportunities for improvement in the space. If you’re using React and are interested in GraphQL, but are looking for an extra push to get it up and running at your company, this is the talk for you!
Sashko has been working on open source developer tools for the last 5 years. Most recently he has been leading open source GraphQL tool development at Apollo, after writing the very first versions of Apollo Client. Previously, he has worked on JavaScript build tooling, reactive UI frameworks, and data visualization.
How to Hire Great Developers
Suhayl Rouag (Jobsity)
There is more to hiring great engineers than just looking at their skillset. In this talk, we’ll explore some strategies for hiring great engineers by hiring great people.
Suhayl Rouag heads business development and sales for Jobsity, a nearshore distributed team software and mobile app development firm based in United States with offices in Ecuador and Colombia and the exclusive partner of Real World React for providing expert remote development services. Before joining Jobsity, Suhayl worked as a contractor for the US Army’s General Officer Management Office part of the Office of the Chief of Staff of the US Army. As the senior in house business analyst and developer he helped design and build the talent management processes and applications that the US Army uses to develop, promote and train their senior leaders. After his tenure working with the US Army, he moved with his family to Ecuador where he co-founded a toy company specializing in educational toys for the South American market before joining Jobsity.
There is more to hiring great engineers than just looking at their skillset. In this talk, we’ll explore some strategies for hiring great engineers by hiring great people.
Suhayl Rouag heads business development and sales for Jobsity, a nearshore distributed team software and mobile app development firm based in United States with offices in Ecuador and Colombia and the exclusive partner of Real World React for providing expert remote development services. Before joining Jobsity, Suhayl worked as a contractor for the US Army’s General Officer Management Office part of the Office of the Chief of Staff of the US Army. As the senior in house business analyst and developer he helped design and build the talent management processes and applications that the US Army uses to develop, promote and train their senior leaders. After his tenure working with the US Army, he moved with his family to Ecuador where he co-founded a toy company specializing in educational toys for the South American market before joining Jobsity.
React-Based Content Management with Netlify CMS & Gatsby
Matt Biilmann (Netlify)
React is most often associated with Single Page Applications, but tools like Gatsby, React Static, Phenomic and Cuttlebelle has made React hyper-relevant for content driven websites as well. Netlify CMS is an open-source project with the goal of building a content management UI in React. It works with any static site generator, and makes content editors participate in the modern git-centric workflow that developers are used to. This talk will show how to use Netlify CMS with a Gatsby-based site, to build high-performant and infinitely-scalable sites with git-based content editing, a user friendly UI, and live browser previews – all without a backend.
Matt is regarded as one of the driving forces behind the resurgence of static websites and is a founder at Netlify, the fastest growing automation platform for modern websites. Matt has lead the development of all of 3 commercial CMS (swears he won’t do a fourth), has written production code in more than a dozen programming languages, is trilingual and enjoys listening to beer and drinking modern jazz.
React is most often associated with Single Page Applications, but tools like Gatsby, React Static, Phenomic and Cuttlebelle has made React hyper-relevant for content driven websites as well. Netlify CMS is an open-source project with the goal of building a content management UI in React. It works with any static site generator, and makes content editors participate in the modern git-centric workflow that developers are used to. This talk will show how to use Netlify CMS with a Gatsby-based site, to build high-performant and infinitely-scalable sites with git-based content editing, a user friendly UI, and live browser previews – all without a backend.
Matt is regarded as one of the driving forces behind the resurgence of static websites and is a founder at Netlify, the fastest growing automation platform for modern websites. Matt has lead the development of all of 3 commercial CMS (swears he won’t do a fourth), has written production code in more than a dozen programming languages, is trilingual and enjoys listening to beer and drinking modern jazz.
Front End Happy Hour Closing Panel
VA
Join senior front-end engineers Ryan Burgess, Jem Young, Stacy London, and Derrick Showers as they close out Reactathon 2018 with a live recording of the Front-End Happy Hour Podcast!
A podcast featuring panelists of engineers from Netflix, Evernote, Atlassian & LinkedIn talking over drinks about all things Front End development.
Join senior front-end engineers Ryan Burgess, Jem Young, Stacy London, and Derrick Showers as they close out Reactathon 2018 with a live recording of the Front-End Happy Hour Podcast!
A podcast featuring panelists of engineers from Netflix, Evernote, Atlassian & LinkedIn talking over drinks about all things Front End development.
The post React conference and meetup videos from 2018 (Q1) appeared first on MeetupFeed.