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!

July 10-11. 2017.

PayPal Checkout with React Native (24:21)

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.

 

JavaScript Futurism (32:31)

Nader Dabit (Javascript Futurism)

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.

 

Mobile Payments with React Native (17:33)

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.

 

Gestures Here. Gestures There. Gestures Everywhere! (33:44)

Kyle Poole & Thomas Bruketta (Instrument)

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 .

 

Rewriting a Large Hybrid App with React Native (30:29)

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)

Ken Wheeler (Formidable)

In this talk I will explore how using React Native with Robotics makes prototyping a breeze and enables mobile control of almost anything

 

Breaking Down Bridging in React Native (23:02)

Peggy Rayzis (Major League Soccer)

Whether you’re integrating a brownfield native application, an existing native component, or a third-party SDK into your React Native project, you will eventually have to cross the bridge between native code and JavaScript. This process can definitely be intimidating, especially if you’re coming from a JavaScript background. In my talk, I will demystify the bridging process by exposing common patterns and best practices for bridging native components and modules. To simplify bridging concepts, I will show you how to use react-native-create-bridge, a CLI that auto-generates native module & component templates in Obj-C, Swift, and Java. You’ll also learn how to communicate between native modules and JS code by properly utilizing eventDispatcher (iOS) and DeviceEventEmitter (Android). By the end of this talk, you’ll leave feeling confident enough in the fundamental concepts of bridging to build a native component or module and use it in your React Native app. SLIDES.

 

The Evolution of API Design: From RPC to GraphQL (30:16)

Eric Baer (Formidable)

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 Native brought the web’s enviable development patterns to mobile, without needing to sacrifice native UI. Code Push for React Native brings web like release agility to mobile apps by enabling developers to update apps instantly. This talk will cover the next iteration of Code Push and how it fits into a complete suite of DevOps services built for called Mobile Center, built for React Native. We will look at the end to end workflow – from a single commit on github triggering continuous builds and tests, to the final, signed app distributed to testers, clients or end users. From monitoring services like JavaScript enabled crashes to understanding user behavior with analytics, we will look at ways to get better mobile apps to your users. We will look at the internals of Mobile Center to use with your existing toolchain, other services that are planned as a part of the suite, and integration with popular community tools and services.

 

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.

 

Building Serverless Backends with AWS Lambda for React Native Apps (30:07)

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.

 

When to go Native Over Javascript (24:02)

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.

The promise of writing an app in Javascript for iOS and having it “just work” out of the box on Android is a tempting one. That along with hot reloading and the ability to push over the air updates to published apps make React Native a tempting proposition, especially for web developers who are unfamiliar with native development and want to leverage their knowledge of React.

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:

 

Building stellar user experiences with React Native (23:42)

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.

 

From Idea to App Store: A Guide to Shipping React Native Apps (33:54)

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.

 

React Native on the Apple TV Platform (14:21)

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

 

React Native Panel With Various Speakers (42:47)

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

 

Realtime Event Processing, Streaming and Subscription for React Native Using Cloud Services (29:23)

Richard Threlkeld (Amazon AWS)

 

The Dark Art of Bundlers (28:00)

Mike Grabowski (Callstack.io)

SLIDES.

 

September 6-7. 2017.

 

Welcome to React Native EU 2017 (6:04)

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)

React Native is much more than javascript. Every React Native app runs at least 4 different languages for the purpose of sharing code, implementing efficient subsystems, and interacting with the host system. We will look at how these systems work together and among other things learn how a javascript style object in your component gets translated into efficient C code in Yoga, the underlying layout engine.

 

When “Good Enough” Just Isn’t Good Enough (Art through history) (29:01)

Jani Eväkallio (Formidable)

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.

 

Home automation with React Native and Raspberry Pi (20:49)

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.

 

Building Expo Snack – The React Native Playground (29:12)

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.

 

Going Over The Speed Limit – Synchronous Rendering in React Native (31:37)

Tal Kol (Wix)

Asynchronous rendering is one of the core principles of React. On the web, the ability to batch updates and work on a virtual DOM proved to be key factors in improving rendering performance. The same architecture seems to do miracles in React Native and gives JavaScript the performance boost needed to render native views effectively. This benefit of React Native is also its greatest drawback. For certain types of problems in native mobile, asynchronous rendering introduces an overhead that is almost impossible to bridge. List views are a good example, as even the best implementation to date, FlatList, struggles to keep up with the fill rate of the most naive list implementation in pure native. Is it possible to introduce synchronous rendering to React Native and tackle this category of problems from a different direction?

 

Building native modules for React Native (24:54)

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!

 

React Native and Badoo: story of a massive experiment (8:02)

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!

 

Scaffolding plugins for React Native (9:26)

Johannes Stein

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.

 

What is RNRF (react-native-router-flux)? (13:46)

Pavel Aksonov

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.

 

Introducing the React Native Builder (8:54)

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.

 

How Skyscanner Tests RN Bridges on iOS (8:42)

Yoel Gluschnaider (Skyscanner)

If your app is a hybrid of native and RN, you will probably rely on a lot on bridges to expose native behaviour to your JavaScript. Like any production code and especially for infrastructure code we want to test the bridges. In this talk we will show how we covered our bridges with automated tests.

 

Why does component-based styling for React Native make sense (12:34)

Kristijan Ristovski (React Academy)

In React Native, we are styling elements using JavaScript objects, so obviously, we don’t have most of the problems that CSS brings along. So why would we use a component-based styling library like styled-components or glamorous-native? In this talk, we will learn about all the advantages that these libraries have over the traditional styling method with objects.

 

Composable Native APIs (28:44)

André Staltz

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.

 

React developer? Great! How are your production skills? (25:22)

Michael Haberman

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.

 

Practical hacks for delightful interactions (22:54)

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)

Ken Wheeler (Formidable)

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!

 

Integrating React Native into an existing native codebase (24:08)

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.

 

Building a Product with React Native (27:28)

Martin Konicek

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.

 

Getting into Physical web with React of Things (29:30)

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.

 

Scaling Mobile Development with React Native (31:41)

Aaron Greenwald (Wix)

React Native is great for developing large applications across multiple teams, but only if you architect your app well. See the code and architecture that allows us to have disconnected teams working on separate modules but delivering a cohesive product that users feel is just one unified app. 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.

 

Offline first applications in React Native done well (28:13)

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.

 

React Native Payments: Bringing the Payment Request API to React Native (27:10)

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.

 

Automate your React Native world with fastlane (24:22)

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)

Participants:

Mike Grabowski, Callstack.io

Tal Kol, WIX

Eric Vicenti, Facebook

Andre Staltz

Ville Immonen, Reindex

 

September 10. 2017.

 

What’s New in React? (23:59)

Ari Lerner

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.

 

Things You Didn’t Know You Can Do With React Native (31:50)

Vladimir Novick

React Native framework is a popular solution nowadays of creating real Native apps with React. But what are it’s limits? In this talk I will cover things you probably haven’t thought about creating in React Native. We will see how Native code can be easily bridged into JavaScript world to create stunning visuals, connecting to wearables and much more. SLIDES.

 

Level Up Your React With TypeScript⁠⁠⁠⁠ (30:16)

Doron Zavelevsky

React and TypeScript are cool technologies that gained a lot of traction and love from web developers. TypeScript is a typed superset of JavaScript that compiles to clean, simple JavaScript code and enables developers to be more productive with better tools, intellisense and static checking. React lets you write JavaScript all through your app. It only makes sense to combine the two. In this talk I’ll go over the benefits of using TypeScript and how to introduce it to your React project, while reviewing common cases.

 

Get That CSS Out Of My JavaScript (26:09)

Brian Hough

React ushered in the era of JSX, bringing HTML to our JavaScript. Now that same community is doing the same for CSS. How’d we get here? What problems are the community trying to solve? Do we hate CSS? Get the perspective of someone who has spent more time than is healthy with existing CSS-In-JS solutions.

 

Webpack – The React Parts (30:08)

Juho Vepsäläinen

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)

Shay Keinan

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.

 

Universal React Apps Using Next.js (22:22)

Sia Karamalegos

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)

Brandon Dail (Formidable)

Lets face it, the code we write very rarely resembles the code we send over the wire. Modern web applications are already built with ES6/ES7+, type annotations, JSX, and other language extensions. We treat JavaScript more like a target language: something we compile to, not something we write. If we’re going to treat JavaScript as a compilation target, we should start thinking critically about what we really want in a source language. In this talk I’m going to try to convince you, through critical ReasonML’ing, that OCaml + ReasonML is one of the most attractive, up-and-coming options to fill this role.

 

Practical Advanced Redux (25:25)

Boris Dinkevich

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.

 

React on Steroids with ClojureScript (31:55)

Yehonathan Sharvit

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)

Michel Weststrate

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.

 

Dealing with Data Offline in Web Apps (20:35)

Jai Santhosh

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)

Gerard Sans

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)

Peggy Rayzis

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.

 

GatsbyJS — How to Create The Fastest Sites In The World (24:52)

Kyle Mathews

Gatsby is a modern JavaScript web framework that lets you build the fastest websites in the world. It combines the fast performance of static websites, modern browser capabilities like and service workers, and the powerful abstractions, excellent tools, and client capabilities of the webapp world. It is a general purpose data-centric web framework that is successfully being used for a wide variety of sites including blogs, marketing sites, documentation sites, and ecommerce. Come listen to why you should build your next website with Gatsby. ARTICLE

 

D3 and React, Together (25:32)

Shirley Wu

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.

 

Handling Side Effects in Redux With Redux-Saga (19:28)

Katarzyna Jastrzębska

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.

 

Detox – Graybox E2E Tests and Automation Library for React Native (23:43)

Rotem Mizrachi-Meidan

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.

 

September 28-30. 2017.

 

A practical guide to Redux Form (44:22)

Erik Rasmussen    

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.

SLIDES. GitHub Repo.

 

Beyond JavaScript: The Real Benefit of React Native (21:09)

Wojciech Ogrodowczyk

React Native, although still a really small part of the mobile development ecosystem, is growing really fast. A lot of “real native” developers dismiss it, because of their previous experiences with JavaScript – a language not easy to love. However, they’re missing an important point – it’s so much more than JS. In this talk I’ll briefly discuss what other options are available. But, most importantly, we’ll talk about why this freedom is so important and why this can make your applications better.

 

Building a Realtime Chat with GraphQL Subscriptions (51:41)

Nikolas Burk

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.

 

Case sudy: Lucentum, creating our own React component library (53:43)

Flavio Corpa

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)

Glenn Reyes

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 path to inconsistent UI (12:32)

Artem Sapegin   

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.

 

Deploying atomic design system at scale (47:00)

Nick Balestra  

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.

 

End to End testing React applications (44:50)

Forbes Lindesay

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.

 

How to make React application truly Reactive with Focal? (16:52)

Gregory Shehet

Functional Reactive Programming (FRP) gets a lot of hype nowadays. The JavaScript community provides us with excellent tools like RxJS, Bacon, and Kefir. But how do you use the power of FRP in your projects? How do you make your React application Reactive? SLIDES.

 

Modular CSS (37:36)

Andrey Okonetchnikov

Nowadays, lots of JavaScript frameworks and UI libraries are focusing on building UI components. With the rise of ES2015 modules and modern build tools, we are now able to split our JavaScript codebase into smaller pieces that encapsulate their behavior and logic.

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.

We’ll see how, by combining the power of JavaScript and AST, we can avoid CSS’s bad parts, embrace good ones and even use it to create a better tooling for CSS. SLIDES.

 

Mutable or Immutable? Let’s do both! (48:22)

Mattia Manzati

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 – Case study: From zero to a super hero app (41:52)

Ferran Negre    

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 Saga, the Viking way to manage side effects (41:19)

Nacho Martín

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.

 

React >> Redux a development workflow (43:21)

Braulio Díez

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.

 

React-Storybook: Design, Develop, Document and Debug your React UI components (38:17)

Marie-Laure Thuret

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.

 

The Dream of Styleguide Driven Development (41:58)

Sara Vieira

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.

 

The effect of React on web standards (59:15)

Karl Horky

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

 

The Road to a Statically Typed Future (58:23)

Patrick Stapfer

In this talk, you will learn about the basics of ReasonML, a OCaml-based language with a more familiar syntax for JavaScript developers specifically targeted to React developers.

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.

We will discover the Reason ecosystem, specific syntactical differences to JavaScript and up- and downsides of this technology while doing live-coding examples. This is going to be a highly interactive “look-and-feel” experience in Reason with some insights in my development workflow. SLIDES.

 

Why I Love Create React App (11:52)

Valerii Sorokobatko

ARTICLE.

 

Writing highly reusable React components (37:36)

Javi Velasco

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.

 

August 24-25 2017

 

Redux + ServiceWorker = Offline React (21:24)

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)

Ben Ilegbodu

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)

Shirley Wu

 

React Native for web and beyond (27:50)

Nicolas Gallagher

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.

SLIDES.

React Native for Web.

 

UNPKG: The CDN for everything on npm

Michael Jackson

 

Back to React: The Story of Two Apps (28:08)

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)

Evan Czaplicki

 

A hand wave of React for all your Internet of Thangs (28:08)

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.

 

ReacTex: using React Native and Neural Networks to recognize handwritten equations (18:58)

Bonnie Milián

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.

The post The latest React and React Native conferences on 99 videos — React Talks Digest Q3 2017 appeared first on MeetupFeed.