This post is the third React talks digest published on MeetupFeed this year with 99 recordings from the five most recent React and React Native conferences:
MeetupFeed collects JS talks recorded at meetups and conferences. Subscribe for our monthly update on the right (or at the bottom of the page on mobile) or follow us on twitter!
Table of Contents
Chain React 2017 — The React Native Conference (Portland, OR)
July 10-11. 2017.
Poornima Venkatakrishnan (PayPal)
This talk is a technical deep-dive of how we use react-native as a means to deliver Checkout experience in our open sourced Paypal SDK. It will also layout how react-native has given us the power to steer without merchants having to reintegrate and republish with every incremental SDK release.
React Native + ES.Next (38:20)
Ben Ilegbodu (Eventbrite)
The goal of this talk is to walk React / React Native developers who aren’t familiar with new ECMAScript through some of its cool new features (including proposed new ones). But it’s more than just learning ES6+. It’s about how we can apply it (as well as future versions of ECMAScript) with React to write clearer and more succinct code. We’ll start off with React’s previous official tutorial that is 100% ES5 and slowly transform it using various ES6 and proposed future ECMAScript features that are transpiled via Babel. I developed a Github repo that is a step-by-step example of how to leverage ES6+/ES2015+ in React by rewriting (an adapted version of) the official React tutorial. SLIDES.
Working consistently across multiple platforms with different file types in React Native can be challenging. In this talk, I will discuss and implement working with and opening a multitude of different file types consistently on both iOS and Android. SLIDES.
Naoufal Kadhom (Netflix)
In this talk, we’ll dive into the mobile payments landscape and explore the various ways that we can accept payments in our React Native applications. We’ll then focus in on mobile wallets and see how we can leverage them to eliminate the payment form and reduce friction in our checkouts. Finally, we’ll learn how we can do all this while sharing our payment code across platforms. SLIDES.
Touchable* components and PanResponder add the magic of touch to your React Native app. They are great for building basic interactions, but to build more complex ones, we need a deeper understanding of how gestures work in React Native.
This talk peels back the layers of React Native’s gesture system, from higher level abstractions like Touchable*, to PanResponder, and finally to the thing powering it all: the Responder system. We’ll go through some of the more simple gestures, then showcase the full potential with custom ones, including bubbling and capture from multiple components. And with our demo app, the audience will be able to interact along with us. When attendees leave our session, they’ll feel empowered, not intimidated, by the many configuration options in (Pan)Responder. Equipped with a deeper understanding of gestures in React Native, they’ll be able to build immersive, rich touch interactions for their apps.
Kyle Poole and Thomas Bruketta will co-present this talk. This dynamic duo has been crafting React Native applications at Instrument (here in Portland) over the last year for global clients. Both developers are contributors to the React Native open source community and Kyle Poole has created a collection of React Native primitives called Constelation that are a part of our team’s daily workflow .
Javier Cuevas (Gudog)
In this talk we’ll share Gudog’s experience on rewriting our large Ionic / Cordova hybrid mobile app with React Native (using Ignite, redux, redux-saga & normalizr). Gudog is a p2p marketplace that connect dog owners and dog sitters in Europe. Our product is nearly as complex as other p2p marketplaces such as Airbnb in terms of features and numbers of screens.
Our first mobile app was built in 2015 with Ionic (Angular.js based framework for building hybrid Cordova / Phonegap apps). This year we decided to rewrite it from scratch using React Native. We’ll share the reasons why we made some decisions regarding our new app and how we have layout our new architecture.
As newcomers to RN as we were, one of the problems we face was the lack of RN / Redux examples for complex apps, i.e. more than 5 or 10 screens. We hope that by sharing our experience we can help others overcome this. SLIDES.
Why we Need an App Browser (23:32)
In this talk I will explore how using React Native with Robotics makes prototyping a breeze and enables mobile control of almost anything
Peggy Rayzis (Major League Soccer)
Over the last 60 years, API designs have changed to respond to everything from new network topologies and new languages, to the pressures of managing ever larger code bases. Today’s most popular API pattern, REST, was developed in a time where the cost of making API requests was plummeting. At the time, bandwidth was getting cheaper, latency was dropping, and the computing power of devices was still tracking Moore’s Law. Mobile turned this on its head. The environments in which apps and APIs need to perform today have effectively regressed a decade.
This talk will explore some of the new client-server interaction models that address today’s pressures and use history to understand the tradeoffs that we made at the transition between the previous designs. I will introduce major tools that are attempting to change the API landscape including GraphQL and Falcor. Since GraphQL is the dominant technology in this space, I will examine some of its functionality, touch on some of its syntax and try to give a strong sense of what’s possible, and what kind of complexity burden a tool like this would impose. Spoiler: There is no silver bullet.
React Native: Zero to DevOps (30:30)
Parashuram Narasimhan (Microsoft)
React as a Platform (29:00)
Leland Richardson (Airbnb)
React provides an abstraction between the description of a UI and the details of how it’s rendered on a given platform. The problem is that `div` and `span` are a hidden dependency on `react-dom`, and similarly, React Native’s `View` is an explicit dependency on Native, making both not quite as “cross-platform” as we want them to be. Learn how we as a community can get around these issues, and what we can unlock by doing so.
Kevin Old (LifeWay Christian Resources)
This talk will explore using the Amazon AWS ecosystem of technologies from React Native Apps.
We’ll explore the characteristics of a Serverless Architecture and how it can can aid any React Native developer in building scalable backends for their applications.
Our focus will shift to building a Lambda to provide the responses to data needed from an example React Native application.
The orchestration of this will be done via the Serverless Framework written to ease the burdens of managing the lifecycle of a serverless architecture.
The example we will talk through will focus on delivering a AWS Lambda, but we will discuss how using a framework such as this for abstraction and orchestration can allow for deploying Alexa Skills, mobile and IoT services serverless architectures.
Finally we’ll have a look at interacting with AWS Lambda, DynamoDB, S3 and SNS using Amazon’s AWS SDK for React Native (currently in Developer Preview) https://github.com/awslabs/aws-sdk-react-native
Attendees will walk away from the talk with knowledge of how a React Native application can interact with a few basic services written and deployed on AWS Lambda via the Serverless Framework. The data for the services will be retrieving from DynamoDB tables which will be also be orchestrated via the framework. We will also talk briefly about authentication in React Native with AWS Cognito and how it can be setup as an auth solution for storing and accessing user data in Cognito attributes as well as data stored in DynamoDB and S3.
Harry Tormey (LaunchDrawer)
React Native is great for writing cross platform apps. Certain use-cases, however, still require native code. Together we will look at how to evaluate when native code is the better choice. I’ll cover strategies for dealing with performance issues and how to handle background tasks like geolocation.
However certain use-cases still require native code. Together we will take a look at some of these exceptions and how to evaluate when native code is the better choice out of necessity or performance concerns.
This talk will be from the perspective of an experienced iOS developer who has been working with React Native and has shipped several cross platform apps with native components.
Things I will talk about:
- Overview of how React Native works
- Overview of iOS/Android application states and how that effects your apps design
- App use-cases that require native code
- Example app with native code that uses geolocation in the background (code available on github)
- How to use native tools to profile your app (with example app, available on github)
- Strategies for dealing with performance issues
Alex Kotliarskyi (Facebook)
As React Native developers we take so much pride in how fast it takes us to build something functional on mobile. However, the development speed is only half of the story. In this talk Alex, a former React Native team member, will share his insight about building amazing user experiences, and how attention to little design details can fundamentally change the quality of your app. SLIDES.
Chris Ball (Echobind)
We’ll walk through everything involved in taking an app from initial concept all the way to submitting an iOS and Android app to the App Stores.
There is a lot to consider when developing a new React Native application, and even more to think about in order to ship it. This talk will focus on distilling all of those requirements into actionable, easy to follow steps that you can use to deliver your next app.
We’ll do this by examining an app crafted specifically for this talk, which you can use throughout the conference! SLIDES.
React Native Sandpaper (35:40)
Brent Vatne (Expo)
An analysis of the roughest areas of developing apps with React Native from my point of view. I deal with developers building greenfield apps every day. I see everything from total beginners working on a side project to agencies, large companies, and startups building apps for their clients and their own businesses. React Native has come so far, but we have much more work to do. As a community we really need to step up our game if we want our bet in React Native to pay off in the long-run. SLIDES.
Doug Lowder (Salesforce)
A talk on the author’s work on the React Native platform to allow support for Apple TV. Includes technical details on the use of the Apple TV focus engine for user input. Includes demos of media playback, data display, and other features. Repo with slides and demos Podcast
Gant Laborde hosts a panelist discussion about React Native and other tech at Chain React 2017, organized by Infinite Red. Panelists include
Jennifer Van – Capital One
Sanket Sahu – Native Base
Mateo Barraza – TailRecursive Inc.
Matt Hargett – Blue Jeans
Dave Nugent – Qlik Playground
Jani Eväkallio – Formidable Labs
Richard Threlkeld (Amazon AWS)
The Dark Art of Bundlers (28:00)
Mike Grabowski (Callstack.io)
9⃣9⃣ The new React Talks digest is live on MeetupFeed with 99 recorded talks from the latest React and React Native conferences. Many thanks to all the speakers for the presentations! 🙏 https://t.co/BvFmJDf1Tt pic.twitter.com/TFFPjoUtNA
— MeetupFeed (@meetupfeed) December 20, 2017
React Native EU Conference 2017 (Wroclaw, Poland)
September 6-7. 2017.
Mike Grabowski (Callstack.io)
React Native EU 2017, organized by Callstack.io, was the first conference in Europe focused exclusively on React Native. It took place on September 6-7 in Wroclaw, Poland.
Rapid React Native (24:50)
Gant Laborde (Infinite Red)
Building libs is fun, but building apps is REALLY fun. Let’s go over some of the best practices and ways we can build apps that fit your needs and your team!
React Native, The Native Bits (30:19)
Emil Sjölander (Facebook)
The history of UI programming is littered with frameworks that failed because they compromised user experience in favour of rapid development. As a technology, React Native has what it takes to avoid this fate, but it’s up to us to prove it by building delightful experiences that feel native to the platform. The question “does it feel native?” encompasses a breadth of topics: predictability, performance, gestures, motion, sensors, sound, and more. For those of us coming from web development, there’s a lot to learn. This talk explains what users really expect from our apps, and how we can use React Native to not only meet, but exceed their expectations.
Ville Immonen (Reindex)
Over the past year I built an open source home automation system for controlling heating, outdoor lights and power outlets at home using Raspberry Pi, React Native and GraphQL. In this talk I share how I did it, what I learned and how you can get started with your own hardware project.
Satyajit Sahoo (Callstack.io)
There’s no shortage of web apps which let you quickly write some code and preview it instantly on the web without having to setup a development environment locally. Snack is provides the same seamless experience for React Native. In this talk we will dive deeper to see how Snack works under the hood, the challenges we faced while building it and what can use you use it for.
Tal Kol (Wix)
Florian Rival (BAM)
A great strength of React Native is how easily we can interface our app with native code. While working with React Native, I created a module (react-native-image-resizer) to resize local images using native APIs, integrated a native SDK to a React Native app and we added React Native to an existing native app. Let’s see how to do this and how it’s working internally!
Guillermo Orellana Ruiz (Badoo)
At Badoo we have four main mobile teams: Android, iOS, Windows Phone (yes, for real!) and Mobile Web. When Mobile Web started adopting React in their projects, it was only a matter of time for us to ask ourselves: should we try React Native? And so we did! This is a short story of our journey with React Native: discovering it, adapting it, making things work and the most important part: convincing your managers that it’s worth our time!
Every now and again we need to integrate native code into our React Native app. First we create the iOS glue, the Android one and this repeats over and over again for every plugin. Wouldn’t it be great if there was something like react-native init … for native plugins? I created react-native-create-library a while back and would like to present how it works, what it does and hope for some feedback to improve this CLI app.
React Native is great product but lacks for stable, intuitive and easy navigation API during many years. Every year we see new, better API: Native Navigator, ex-Navigator, NavigationExperimental, ex-Navigation, wix native navigation, airbnb native navigation, ReactNavigation… Once I’ve started React Native development, in 2015, I created RNRF – simple API for easy navigation. It was clear that better navigation instruments will come later but I didn’t want to change my code again and again to switch for better API. Every new major version of RNRF is based on different navigation framework and mostly preserves own API. Another goal was to represent all navigation flow within one place in clear, human-readable way – similar to iOS Storyboards concept. This way other engineers could understand your app flow faster. I want to talk about latest version (v4) of RNRF based on ReactNavigation and MobX and provide best practices. New version provides not only navigation solution but also proposes a way to manage your app state.
Sanket Sahu (Geekyants – NativeBase)
Bringing Designers and Developers on the same repo with React Native Builder. Don’t just prototype but code as a designer. Introducing BuilderX.io, a screen-design tool which codes for you. Right now it supports React Native and it is available as a desktop app for Mac. Watch the video to know more.
Yoel Gluschnaider (Skyscanner)
Kristijan Ristovski (React Academy)
Composable Native APIs (28:44)
The declarative nature of React components is what makes it composable and attractive for UI development. React Native provides a way of using React for native development, but also introduces a couple of APIs for interacting with native modules, and these are not declarative. It is not always clear where to call these APIs from, and usually they end up in lifecycle hooks or redux middlewares in an unstructured style. In this talk we will see how Cycle.js (or in general, a hexagonal architecture) can help manage both React components and Native APIs in a declarative fashion, to organize code and make it more testable.
Developing a good design website is an important skill, but let’s not forget that our code will be deployed in production environment and thousands will consume it. That may lead to a nightmare: you get a stack trace of a bug, but wait, it is minified and packed, you have no idea what this bug is or how to reproduce it. In this talk we will take Michael rich experience in production environment and go from case to case to learn from other people’s mistakes.
Eric Vincenti (Facebook)
It’s tempting to think that smooth and delightful UIs would also have beautiful, easy to read code. In all practicality, there are a number of gross hacks that React Native developers will utilize to implement slick user experiences. We will review the implementation of a photo viewer, and discuss the dirty hacks that were necessary to deliver a delightful user experience. Then we will look forward and see how the ecosystem can evolve to avoid the hacks without compromising on the resulting experience.
Cross Platform & Beyond (38:38)
Nader Dabit (React Native Training)
React Native was originally built to target only iOS and Android operating systems, but as popularity of react as well as the reactive paradigm grew in popularity and opened other doors to other platforms, projects such as React Primitives and React Native Web began to take shape. We are now also seeing other paradigms in the same space such as ReactXP, Weex, and Flutter begin to take shape. We will dive into each of these platforms and discuss how they work, what their APIs look like, how they differ from the traditional React Native platform, and how the future of cross platform development is evolving.
Reasonable React Native (33:28)
An introduction to writing React Native applications using ReasonML. Find out why ReasonML is great, why writing React Native with Reason is the jam, and learn how you can get started with it today!
Eloy Durán (Artsy)
You’ve got an existing application and have come to the exciting conclusion that you want to adopt React Native. Rather than rewriting your full application at once, you may want to introduce it in an iterative fashion and without impeding progress for developers that are continuing to work on the existing codebase in the interim. But where and how to start? This talk will focus on _why_ at Artsy we came to the conclusion to use React Native and provide practical examples on _how_ we integrated it into our existing Objective-C/Swift codebase.
How do engineers at Facebook build products with React Native? We’ll walk you through building a simple screen in the Facebook app with React Native on both platforms, covering some GraphQL in the process. We’ll discuss the collaboration between engineers and designers. We’ll also cover A/B testing which is a crucial part of shipping most code at Facebook. The talk has practical examples taken from a project Martin worked on.
Network layer in React Native (20:49)
Alexey Kureev (Werkspot)
React Native provides us with a set of primitives for building mobile applications. A few of these can be aggregated into a “networking” layer that manages the transfer of data. This layer was designed to mimic an API we have in the Web, but despite all the similarities, it has its own *qualities* and caveats every good React Native developer should know about. In this talk I’ll try to guide you through the networking layer in React Native and share some tips and tricks I’ve learned along the way.
Vladimir Novick (CodeValue)
Physical Web taking the world by a storm. More and more applications interact with physical devices using Beacons and low energy bluetooth. In this talk I will cover how to interact with physical world from inside React Native application. SLIDES.
Aaron Greenwald (Wix)
How many developers do you have working on your React Native app? One? Less than five? 15? What if you had over 40? React Native is a good fit for developing large applications across multiple teams in a company, but only if you architect your app correctly. Less than two years ago, I could count all of the developers working on our app on one hand. Now, I don’t even know everyone’s names. Learn how we architected the Wix app in a way that allows us to have multiple teams on multiple continents working on separate modules but delivering a cohesive product that users feel is just one unified app.
Adrien Thiery (Osedea)
This talk will present the concepts of Offline first applications, Optimistic UI Updates, “Transaction management” in redux. Humanly speaking, I will explain how your app should behave in our always kinda connected world (kinda, because you loose the network in the Subway, in your bathroom or in the elevator) to avoid frustrating your users, let them use your application even when they don’t have network and access data loaded in a previous session when they need it most (you know, when you have 1% battery left and turned on Airplane mode to keep your phone going just for the time to come home or find a plug somewhere). I will present some code examples of using awesome libraries to do that easily and talk about the local storage alternatives (AsyncStorage, SQLite and Realm) available to React-native.
Naoufal Kadhom (Netflix)
What if I told you that accepting payments in mobile apps could be easy and that you could use a single API to accept payments across three different platforms? In this talk, we’ll learn about the Payment Request API, a new W3C standard that dramatically simplifies accepting payments on the web, and how we can use React Native Payments to leverage it in our mobile apps.
Philippe Trépanier (Osedea)
Coming from the web world, building iOS and Android apps are a pain.It takes time, there are a ton of different tools or services to use and jump between to get to the end point and it is just a loss of time that could be used to fix that weird UI element you did not have the time to finish, or that code that hasn’t been tested but really should be. Thankfully, fastlane is here to help us and makes it incredibly easy to automate Android and iOS builds, deployment, screenshots and far more. This talk will present how to get started and build and deploy a React-native project to Testflight (iOS) and the Android Play store beta track and will present in more details a subset of the tools provided by fastlane.
React Native EU 2017 – Q&A Panel (51:12)
Mike Grabowski, Callstack.io
Tal Kol, WIX
Eric Vicenti, Facebook
Ville Immonen, Reindex
ReactNext 2017 – International React Conference in Tel Aviv (Tel Aviv, Israel)
September 10. 2017.
What’s New in React? (23:59)
The only constant we can could on in tech is that nothing ever stays still. This is a truth in tech and especially true in web development. React is no different. It’s getting faster, easier, and more reusable. In this talk, we’ll be taking a look at the new features of React and what you need to know for working with React 16. It’s a whirlwind topic with a lot of useful information about riding on React along it’s next iteration. Buzzwords: async rendering, error boundaries, fibers.
Webpack – The React Parts (30:08)
The success of React also helped to leverage webpack. It’s the tool of choice for React developers. In this talk I will go through a variety of ideas and techniques that will help you get more out of webpack.
WebVR and React (22:53)
WebVR enables web developers to create frictionless, immersive experiences. We’ll explore the core concepts behind VR, see different demonstrations, learn how to get started with React VR and explore a new powerful approach for building VR experiences using React.
Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.
Critical ReasonML’ing (30:15)
Practical Advanced Redux (25:25)
Come and see some amazing things that can be done with Redux middleware and open source tools to make your Redux project shine. NOTE: This is an advanced talk for developers with practical experience using React & Redux.
In this talk, we will see how fun and productive it is to write a React application using ClojureScript. ClojureScript is a pragmatic functional LISP-based language for the browser. It embraces immutability and provides the fastest wrappers for React like reagent and om. I will show the basics of the language and show how well it integrates with React. This talk will feature lots of live coding demo.
React, But For Data (26:45)
React and its component model is nowadays the most appealing abstraction to declaratively describe user interfaces. The core concepts are so powerful that we can apply them outside the DOM, like in React-VR, Sound manipulation, games etc. In this talk I will demonstrate that all the core ideas powering React are so powerful that we can even translate them to a completely different field: state management. MobX-state-tree applies these very same concepts to make data management declarative, elegant and easy to reason about.
This talk will explore and help us understand how we can elevate your apps with a Service Worker and explore various options of data management when you are offline including redux-offline, pouchdb, a simple IndexedDB. It will also look into how can you wire your application such that heavy offline data can be seamlessly sync-ed once the user gets online and few approaches of how to manage the behaviour of your APIs to help you with this aspect.
Relay Modern or Apollo? (30:10)
New project starts. Everyone is excited. GraphQL is on the stack. Yay! Life is good! Suddenly someone pops the question. So which GraphQL Client should we use? What do you mean? Oh, nooo! 🙂 Don’t worry I’ve got your back. In this talk I am going to put these two under the microscope and find out what are they best at, what features they share and, most importantly, what are their key differences! You can relax.
Write Once, Render Anywhere (24:57)
Wouldn’t it be awesome if you could write a React component once and render it in web, native, and even VR applications without changing a single line of code? Thanks to several libraries that bring React Native’s primitives and APIs to the web, now you can! This talk will introduce three libraries that allow you to develop cross-platform components: React Native Web, React Primitives, and ReactXP. You’ll also learn how to architect your shared component base to achieve maximum reuse across platforms.
D3 and React, Together (25:32)
D3 and React, who should control the DOM? After all, React’s whole purpose is managing updates to the DOM so we don’t have to. D3, on the other hand, is a library for building data visualizations, and it too needs access to the DOM. And stepping back, when should we even use D3 and React together? In this talk, I will give guidelines on when React should have ownership of the DOM, and when D3 should instead. More importantly, I will cover the interactions and applications that will benefit the most from using D3 and React, together.
Have you ever struggled with making dependencies between reducers? Have you ever stepped into problem with mulitple async operations done at the same time doing huge mess in your state? Let me be your guide into redux sagas with tips, how and when you can use them in your application to solve all side effects problems at once.
Bridges to React Native (26:50)
Florian Rival (BAM)
A great strength of React Native is how easily we can interface our app with native code. In this talk, I’m going to explain the lifecycle of a native module, how to call it, how to reuse screens and pages from an existing codebase or integrate React Native screens into an existing app.
High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. The most difficult part of automated testing on mobile is the tip of the testing pyramid – E2E. The core problem with E2E tests is flakiness – tests are usually not deterministic. React Native makes flakiness worse due to the async nature of the bridge. We believe the only way to tackle flakiness head on is by moving from blackbox testing to graybox testing and that’s where detox comes into play. The library synchronizes with the lifecycle of the app, including React Native core, making tests finally deterministic.
React Alicante 2017 (Alicante, Spain)
September 28-30. 2017.
A practical guide to Redux Form (44:22)
Forms are hard in any framework, but they are extra complicated in React due to the recommended method of using “controlled inputs”, inputs where all of their state is managed by the developer, not by the DOM or the React framework itself.
One of the most popular ways throughout the React community is my library, Redux Form (500k monthly downloads), which dispatches actions on form events to save form state in the Redux store.
In this talk we will explain how to set up a simple form, initialize values, run validation, and submit the values. Time permitting, more advanced techniques, like async validation, submit validation, or field arrays will be discussed.
GraphQL is getting increasingly popular and many big companies like GitHub, Twitter and Shopify are already using it in production. In this talk, I want to demonstrate one of the newer and less-known GraphQL features: Realtime Subscriptions. After a quick introduction to the basics of GraphQL, we’ll build a realtime messenger app with React and Apollo Client. I’ll highlight the requirements for building a subscription server that works with Apollo and introduce best practices for implementing subscriptions on the frontend. SLIDES. GitHub Repo.
About a year ago, we faced the challenge of creating a whole new React ui-kit with a completely custom look & feel to unify the styles of all the web apps for some public European institution. What challenges did we face? How did we overcome them?
How have we contributed to the React community? This is the study case of Lucentum: the first (but not last) React component library born and raised in Alicante! SLIDES.
Code-splitting in React apps (36:37)
Dynamic imports have arrived! With the new import() proposal we have got a convenient capability to load React components whenever rendered. Our mission now is to build faster web apps and deliver as less code as needed. But how?
In this talk we will leverage code-splitting with minimal effort and discuss the page speed impact. SLIDES.
Custom CSS is the simplest way to make the UI inconsistent, especially if we’re talking about spacing between UI elements, font sizes or colors. When developers have too much freedom in defining the UI, they will do things differently. The issue could be solved by avoiding any custom CSS on the app level and having a set of base components that allow developers to glue UI together in a consistent way. SLIDES.
While microservices is a common architecture for the backend, most frontends are still running as a monolithic application. Therefore building, deploying and consuming frontend components across a diversity of teams and web applications can be a daunting task, especially at scale. To address this issue, at OpenTable we enable fast-moving teams to easily build and deploy front-end components using OpenComponents, an open-source, battle tested, front-end microservice architecture for painless component delivery.
Usually, micro-service architectures are unopinionated by nature, leaving tech-stack decisions to service owners. During this session I’ll explain how OpenComponents works, how do we use it at OpenTable and how we allows teams to build ship and consume React components at runtime across teams and web applications with the ultimate goal of delivering atomic design system at scale. SLIDES. GitHub Repo.
Having a good testing setup, one that allows us to create meaningful tests and is not a painful process, is extremely important to produce quality code. In this talk we will explore the options that we have, and will explain how to leverage webdriver for end-to-end testing React applications. SLIDES. GitHub Repo.
Modular CSS (37:36)
And yet many projects are still putting generic class names and selectors into a huge CSS file. The fact is, styles are a part of components and deserve to be treated same way we treat JS. CSS deserves to be scoped and modular and have better tools that improve the developer experience.
This talk does a short retrospective of the problems we have with how we write, organize and bundle CSS and how we can improve it by using a better folder structure, naming conventions and local scope, post-processors like PostCSS and bundlers like webpack.
MobX or Redux? Mutable or Immutable? Why not do both? Lets discover together MobX-State-Tree, an ongoing experiment to create an opinionated state management library that mixes mutable and immutable, oop and functional programming, redux and mobx trying to take the best of both world to create the next generation of state management! SLIDES.
React Native ecosystem is awesome, we have plenty of tools and libraries to start right away creating our own app. But where are those apps? How should we proceed to start building more apps and less tools?
In this talk, I will drive you through my journey in a personal project that went from a pure Android application to a cross platform React Native app where we can support both iOS and Android. SLIDES.
Redux solves brilliantly the state management of our React Apps, but leaves open the choice of how to manage side-effects (communicating with external APIs, or anything that deals with the outside world). Redux-Saga is a popular and clever solution that comes to our help, leveraging the shiny ES6 generators for controlling the async flow. In this talk we will explore what is the problem that Redux-Saga solves, we will provide an introduction to ES6 generators and we will see how to work with Sagas with practical cases. SLIDES.
How many times have you heard that Redux can be an overkill for a simple application? How many times… your simple application ends up being a complex one? What can you do if you need to get into quick iterations cycles? Is it possible to find a trade off between both approaches? In this session we will talk about the development workflow we follow at Lemoncode when we develop React / Redux applications. SLIDES.
Designing UI React components is not an easy task. They often rely on several states that are hard to reproduce when we are developing in the middle of an existing app. Worst, once a component is live, how do we make sure that its well documented in order to let any new dev know easily how to use it and what behaviour expect from it?
React-Storybook provides a complete isolated environment with hot reloading that let you design and develop iteratively your UI React components. On top of that, by building your components this way you will ensure almost for free the creation of a nice living documentation and you will have a perfect entry point when we’ll became the time to experiment things or solve issues. SLIDES.
React is awesome! We probably all here agree on that. You have heard of all types of driven development but react emerged a new type, styleguide driven development became a reality with components. This type of development focuses on Developer/Designer collaboration and on assertive components. With the use of React, CSS Modules, Flow and Snapshot testing we were able to almost remove style regressions. In this talk you get a glimpse of you can start styleguide driven development and how you can sell this dream to your project managers. SLIDES. GitHub Repo.
Since inception React has solved problems from first principles, choosing to create the best possible product instead of relying on what was possible with already existent technology. In order to achieve this, the React team has invented new languages and paradigms such as JSX, the React component model and unidirectional data flow.
This talk will review these inventions and the supporting changes proposed to web specifications. Community sentiment towards and adoption of React and related web standards will also play a role in this overview, along with efforts for integration and cooperation, such as the usage of web components with React components.
Looking ahead, future of the library will be examined, where more standards will be used in React in order to make it smaller and more performant. SLIDES
You will see how Reason’s type system will help you write terser, more functional and more runtime-safe code and how you can leverage this language to write strongly typed React applications.
Why I Love Create React App (11:52)
React is a wonderful tool to write reusable ui components but it takes no decisions on how they should be styled. This leads to a huge amount of different styling approaches, most of them based on CSS in JS, that usually introduce some coupling with your code.
Is it possible to skip this dependency and to write components that doesn’t depend on style? In this talk we will go through some of the most interesting approaches made by styling libraries, analyzing what should they cover to make components highly reusable and customizable. Eventually we will see a technique that the upcoming React Toolbox Core is going to use to ship complex components agnostic from style. We will see how really complex components like DatePickers can be reused and re-styled even for React Native. SLIDES.
React Rally (Salt Lake City, UT)
August 24-25 2017
Zack Argyle (Pinterest)
Service workers can give us instant page loads and the ability to browse with little or no internet connection. This talk includes a Service Worker primer and steps for enabling offline browsing in a React app.
React-ing htmlFor=empathy (30:52)
Jana Beck (Stitch Fix Algorithms)
Imagine that you’re locked-in, unable to communicate except by blinking a single functional eye. Your only method of communication is to watch (and listen) as a helper reads through a list of all the letters of the alphabet. When you want to select a letter, you blink. Can you imagine this? Can we do more than imagine it? On the modern web, we can! Using React and WebGazer.js (an open-source eye-tracking library for the web), we can approximate this communication technique, the method that Jean-Dominique Bauby used to compose his best-selling memoir The Diving Bell and the Butterfly.
Layperson’s guide to React Fiber (31:59)
Fiber was introduced in version 16 of React. It is a ground-up rewrite of the React scheduler, typically mis-referred to as the “Virtual DOM.” The Fiber-based scheduler supports “cooperative scheduling” and allows for other output renderers besides the browser DOM. In this session geared towards those familiar with React, let’s learn about what React Fiber is and why it exists through the lens of how it will impact your React development and the performance of your apps at runtime. SLIDES.
D3 & React (26:57)
React Native for web and beyond (27:50)
What if you could create high-quality components for PWAs using React Native? Twitter Lite does just that using React Native for Web. Find out how React Native for Web enables teams to rapidly and reliably create accessible, high-performance components that can be rendered to native platforms and the web. React Native is turning into a platform-agnostic framework for defining your application’s user interface.
Michael Chan (learnreact.com)
You have two teams, making two apps. The first made something that demands very few updates and doesn’t require specialized knowledge. But the codebase is huge. The second is a bespoke, Hacker News masterpiece. But it demands regular rewrites and requires constant re-education.
Which do you chose?
Maybe you already chose a path. Your fingers are bleeding from all the typing or you’re in the middle of rewrite #3.
How do you get off that path?
Let’s talk about getting back to React, the overlooked APIs and uncommon patterns that make you a happier and healthier React developer.
What WebAssembly means for React (32:21)
Lin Clark (Mozilla)
There’s a big push to improve React’s perceived performance. And WebAssembly is fast. Could WebAssembly be part of the solution? In this talk, code cartoonist Lin Clark will look at what WebAssembly could mean for React’s performance, and how the new Fiber architecture makes that even more of a possibility.
Demystifying setState() (25:39)
Justice Mba (Vconnect)
Many React developers bump into bugs because of using setState() incorrectly. In fact, some dreadfully avoid setState(). In particular, its asynchronous nature and batching often confuse React developers. In this talk, I will explore common setState() misunderstandings and pitfalls, explain why exactly setState() needs to be asynchronous, how to use it correctly, the powerful patterns buried in setState(), and what it means for the future of React in Fiber.
Convergent Evolution (27:42)
Devon Lindsey (Apple)
I have an NFC implant in my hand and a household full of Internet of Things technologies. I’m building out a device that allows me to wave my hand over an RFID reader outside my home and set my entire house to my personal settings before I enter.
In this talk, we’ll examine the details of a project that recognizes handwritten equations and generate the result in LaTeX format. Through the project, we’ll learn how to give the first steps into learning AI, through sharing my own experience we’ll review the challenges, excitement, suspense, frustration and hype around it. We’ll discuss some basic neural networks concepts that serve as starting point, how any of us, either beginner or seasoned developer, can get into AI and how can React help us in this journey.