Tuesday, 10 October, 2017 UTC
Summary
The React Talks Q2 report is the pilot episode (the S01E01) of the whole MeetupFeed project—a handpicked curation of 85 talks recorded at React meetups and conferences over the course of Q2.
What is the MeetupFeed project?The React Talks Q2 report, the first @meetupfeed curation with 85 talks recorded at meetups and conferences is LIVE!https://t.co/9rXpjE4rnz— MeetupFeed (@meetupfeed) October 11, 2017
MeetupFeed is a curation of recorded talks from the latest tech meetups and conferences. It makes it easy for developers to follow and discover what’s happening in their global communities.
The React Talks Q2 Report
Flooding you with YouTube URLs for 50+ hours of React videos wouldn’t have made much sense so we have spent the last two weeks contacting speakers and gathering information about as many talks as we could. When browsing the report, you can easily find the interesting ones thanks to the TL;DR descriptions we could gather from speakers, YouTube descriptions and meetup announcements. For enabling some sort of Q&A, we have added the twitter profiles for all the speakers we could find so that you can reach them with your questions.
The result is a comprehensive report of React Q2 events with dozens of talks, detailed descriptions and all the useful links at hand.
The next episode, React Talks Q3 is going live in two weeks on 10/24, along with several new Talks series covering other technologies. Stay tuned, subscribe to the MeetupFeed newsletter and follow us on twitter.
Chicago, IL, USA
React Chicago
Realtime WebSockets with the Antares Architecture (55:21)
Dean Radcliffe (Deanius Solutions)
For sites that focus on real-time collaborative experiences, WebSockets are a must. But once you have them – do you invent your own protocol to run over them, or what? This talk will explore the fledgling Antares architecture. Antares is currently used to build a real-time collaborative educational platform at a large Educational Tech company in Chicago, and is a mashup of functional concepts from Redux, RxJS, and MeteorJS. We’ll explore and live code sample applications and discuss the shifts in mindset to develop and support this powerful, enabling technology.
High Performance Finance Data Viz with React (28:02)
Ragu Ramaswamy (RetireUp)
D3 has become the de facto library for performing data visualization, however it has an api which is not intuitive at first, using React to update the document with svg and d3 to play with the math has been successfully tried in some libraries. But finance data viz is a different beast, there are often thousands of svg objects which get updated on every interaction. The debate between svg and canvas gets real in this area. In this talk I will go over the problem with using svg for a finance chart, and convert that to canvas to show the performance improvements by comparing the flame charts.
When To Go Native Over Javascript (23:50)
Harry Tormey
React Native is great for writing cross platform mobile apps in Javascript. Certain use-cases, however, 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. As an example for the discussion, I’ll be using a medical marijuana delivery application I wrote using React Native. We’ll cover when to move code to native, how to handle background geolocation, and strategies for dealing with networking using redux.
Redux Wizardry Using RxJS Observables (39:41)
Berkeley Martinez (freeCodeCamp)
Redux has created an enormous paradigm shift in web application development: Defining how data changes in response to events in your application. This change has led the front-end community to embrace Redux with increasing optimism. But there is still one thing that Redux is not very good at: asynchronous side effects.
Reactive Extensions for JavaScript (RxJS) and Redux-Observable solve the async problem by combining functional programming concepts and event-based data streams allowing the developer to define side effects that are act in response to events.
This advanced talk will show you how to combine synchronous and asynchronous code flawlessly using RxJS & Redux-Observable to take your JavaScript apps to the next level.
Note: This talk explains RxJS in the context of a Redux application. However, RxJS is framework-agnostic, so the principles apply to vanilla JS or other frameworks such as Angular, Ember, etc.
Reactive Extensions for JavaScript (RxJS) and Redux-Observable solve the async problem by combining functional programming concepts and event-based data streams allowing the developer to define side effects that are act in response to events.
This advanced talk will show you how to combine synchronous and asynchronous code flawlessly using RxJS & Redux-Observable to take your JavaScript apps to the next level.
Note: This talk explains RxJS in the context of a Redux application. However, RxJS is framework-agnostic, so the principles apply to vanilla JS or other frameworks such as Angular, Ember, etc.
Sharing code between React Native & React Web (1:00:17)
Colin Young & Tyson Kunovsky (Lambda Consulting)
In this talk we will explore how the Lambda Consulting team was able to achieve close to 70% code reusability in a complex React + Redux application between web/mobile/tablet through the use of shared reducers, utility functions, higher order components, dynamic requires, Expo, and react native for web. Along the way there were many potential pitfalls and gotchas so we hope that our experiences will serve as a good starting place for anyone who is looking to share code between web and mobile applications.
Vancouver, Canada
ReactJS Vancouver
React (Native) at Foodee, and Rich Interactions with Animations (18:00)
Joe Gaudet (Foodee)
Joe Gaudet gave a talk titled Fun with Animations which he teaches how to animate using Animated library in React Native
Managing State in React / React Native (18:42)
Eric Kim (Apply Digital)
London, UK
React London Meetup
Converting nested.com to a single page application (38:17)
Tyler Ferguson (Nested)
We’ve recently migrated nested.com from a fairly traditional multi-page Rails application to a React single page application. In this talk we’ll share our general approach and some of the things we’ve learned in the process, including how to do this in piecemeal manner, how to maintain performance while the old and new implementations are running at the same time, and monitoring the impact of each converted page through A/B testing.
Building User Interfaces Without React (7:14)
Luke Sheard (J.P. Morgan)
In this Lightning talk Luke’s gonna talk to you about Building User Interfaces Without React … but with React.
Using Facade Pattern With JSX (7:58)
Olena Sovyn (Webflow)
Lightning Talk
The middle of the pyramid (30:01)
Thomas Hudspith-Tatham (Sky)
We all know the famous test pyramid and I think the middle layer has one of the most valuable parts to play. React plays great with a strategy we’ve taken advantage of that I’d like to call browserless app testing.
React Storybook (31:35)
Karl O’Keeffe (Geckoboard)
An introduction to React Storybook, what it is, how to use it, and some of the benefits we have seen from adopting it here at Geckoboard.
A speed-date with ReasonML (22:11)
Marcel Cutts (Asgard)
People in React community are absolutely bursting with excitement about ReasonML – but why is that, and what does it have to do with our beloved React? Is this just another hipster foible, or will we all be barking about ReasonML in a year’s time?
All great questions! Join me in surfing the hype wave to unearth answers and more!
Cavy: Testing React Native apps (32:26)
David Somers & Abigail McPhillips (Pixie Labs)
React Native is an awesome tool for building mobile apps. However the integration testing tools are limited, which is hard to swallow for a modern library. So we made Cavy: a framework to test React Native apps and make developing them faster. We’ll show you how it works, talk though its principles, and show you how we use it at Pixie Labs.
Dublin, Ireland
ReactJS Dublin
Inline Stye (1:13:33, uncut)
Richey Ryan
Conventional wisdom tells us that we must separate our concerns. We must keep our HTML, CSS and Javascript separate. A component based approach to building applications separates concerns based on functionality. This is in contrast to the arbitrary boundaries of documents, styles and interactivity.
An introduction to GraphQL (1:13:33, uncut)
Brian Mullan
Vienna, Austria
React Vienna
Popper.js with React (16:00)
Federico Zivolo (Quid)
In this talk we see how is it possible to integrate JavaScript libraries into React when they are written with this kind of integration in mind. Specifically, we are going to talk about Popper.js, a tooltip positioning library. This kind of libraries are usually very messy, but in this talk we’ll see how Popper.js plays greatly with React.
Recompose to Simplicity and Beyond (22:43)
Timo Obereder
Github
The breakdown of Timo’s talk:
Act 1 — The concept of higher order components
Act 2 — Presentational component and container
Act 3 — Recompose (with github repo example)
How frontend microservices help us stay flexible (49:41)
Tomek Wiszniewski (Kalo)
Choosing the right technologies when starting a project is a make or break thing. It’s almost impossible to change the stack later on. Who knows if React will still be mainstream when our thing hits the market? It’s a risky decision, right?
Not anymore! Now we can use frontend microservices to pick the right tool for every job! Traditionally, single page apps are monoliths. Here’s a React app, that’s an Elm app and this one is in Vue.js. In this talk, we’ll see how things like web components change the game. Finally, we can use the right tool for every job! We can introduce Elm bit by bit to a React-powered experience – or neatly embed Vue.js UI nuggets in an Angular app.
We’ll learn from the ups and downs of traditional microservices, catch a glimpse of the culture that this approach has brought about at Kalo and leave with a strong toolset to make things happen.
You can find Tomek’s same talk from the Elm Europe 2017 conference here: https://www.youtube.com/watch?v=U_5XKPe4fZM (26:39)
JavaScript: How do I even lib? (27:15)
Federica Recanatini
As the title suggests, this talk is about creating and consuming third party libraries – its aim is to give as much information as possible on the topic in order to motivate developers to explore the possibilities out there in case they decide to distribute their own library or contribute to an existing open source one.
Among the topics which are covered are: why it is important to know how libraries are distributed (not just relevant for open source, but also for business), where to start, bundle vs. module builder, definition of usage spec of imports/exports, some considerations regarding styles and where to host them. The example I am showing is the react-redux-router library from a distribution point of view (it is irrelevant that people know what the library is actually for).
My slides are hosted on github pages: https://feychou.github.io/how-do-i-lib/
On the last page you can find the sources I used: https://feychou.github.io/how-do-i-lib/#/15
Creating AR and VR experiences with React & ViewAR (26:05)
Markus Meixner (ViewAR)
Webpack: From Apprentice to Journeyman 1/2 (35:25)
Webpack: From Apprentice to Journeyman 2/2 (56:19)
Juho Vepsäläinen
Webpack has become an indispensable tool for web developers. I discuss the tool in my book “SurviveJS – Webpack”. The talk discusses the book topics. You will learn the basic ideas behind webpack while getting a better idea of its capabilities and surrounding ecosystem.
I have the slides at https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/ and https://presentations.survivejs.com/webpack-from-journeyman-to-master/ . The book is available at https://survivejs.com/webpack/ and you can read it online.
There’s also a summarized version of the slides at https://presentations.survivejs.com/webpack-the-good-parts/
I also did something React specific at https://presentations.survivejs.com/webpack-the-react-parts/
Paint the web with CSS (21:52)
Eva Lettner
A Hitchhiker’s Guide to React VR (49:53)
Nik Graf
In this talk I will take you on a journey to other worlds. We travel through the Galaxy exploring the various planets and locations. We kick off our journey exploring the best our universe has to offer in terms of bureaucracy by visiting the Central Vogon Museum. Next we learn how planets are created. At last we explore the meaning of life. It may or may not be 42.
Automating the Workflow in a Pharma Lab with React, NodeJS and MongoDB (38:36)
Ognian Tschakalov
Having a „real world“ problem and trying to find a solution with modern frameworks? This talk shows how to transform a manual workflow of chemical – analytical laboratories into software.
Using JSON Schema to describe MongoDB data and generate the corresponding UI with React is one of the approaches used to build a LIMS (Laboratory Information Management System).
So don’t be afraid to model a business process and don’t be afraid to build your own tools.
Berlin, Germany
React Native Meetup Berlin
Async testing in Jest (36:45)
Robin Pokorny
Jest is React’s best testing companion. It also brought several concepts to mainstream JavaScript testing: zero configuration, first-class mocking, and snapshots. With the rapid release of speed improvements, it’s easy to miss a new useful feature. Recently new async testing features were added. In this presentation, Robin shows how to use them to avoid pitfalls of false positives that often occur in tests of asynchronous code.
Munich, Germany
React Munich
High Performance Javascript in V8 (32:56)
Peter Marshall
This year, V8 launched Ignition and Turbofan, the new compiler pipeline that handles all JavaScript code generation. Previously, achieving high-performance in V8 meant catering to the oddities of our now-deprecated Crankshaft compiler. There is a lot of advice out there about how to write fast JavaScript, but we will separate fact from fiction. This talk covers our new code-generation architecture – what makes it special, a bit about how it works, and how to write high performance code for the new V8 pipeline and modern JS engines in general.
Testing redux stores with chai-redux (23:27)
Anna Maria Gruber
Testing complex redux stores and async actions can be painful. chai-redux is a chai extension for testing redux stores. Target audience: intermediate, experts, but with some changes beginners too
Tropic Test Runner (34:15)
David Neubauer
Since I got curious about how JavaScript test runners are implemented, I contributed to mocha. Inspired and motivated from that experience, I started to tackle some challenges which attracted my attention by solving them from scratch. The talk features an high-level overview of the architecture and how certain key features (isolated code execution, transpiling ES2017) are achieved. Finally a short usage example might complete the talk.
React Native Munich
Storybook in React + React Native (33:46) (another version)
Jonas Kleinholz
Skill level: beginner-friendly.
With React Native Storybook you can design and develop individual React Native components without running your app. Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Jonas wrote a blog post on how to use storybook with create-react-native-app without ejecting: https://medium.com/@inyono/using-react-native-storybook-with-create-react-native-app-471e531bb128
https://github.com/storybooks/storybook/tree/master/packages/react-native-storybook
Redux Saga (44:58) (another version)
Nacho Martin
Skill level: advanced.
Redux-saga is a Redux middleware that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better. The mental model is that a saga is like a separate thread in your application that’s solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well. It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. (if you’re not familiar with them here are some introductory links) By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like async/await, but generators have a few more awesome features we need)
https://github.com/redux-saga/redux-saga
Building an offline-first service (31:58)
Ákos Kriváchy (Futurice)
Skill level: Intermediate
React Native has broken down the barrier for React web developers to start building mobile apps. But mobile apps have very different characteristics especially when it comes to network connectivity. On a GPRS or 2G network, requests can take upwards of 30 seconds to complete which results in an offline-like user experience.
We spent the last year building 3 apps for different clients learning some of the architecture requirements, UX patterns and pitfalls of horrible network connections. In this talk we’ll explore why you should be building your React Native apps with offline-first in mind and we share a potential architecture or solution as well. First we go through the frontend that uses React Native and Redux and then the backend that uses Scala and Akka.
https://speakerdeck.com/krivachy/building-an-offline-first-service
Pepperoni, a boilerplate framework for React Native (27:28)
Tino Junge (Futurice)
Futurice FutuTalks Munich Beer & Tech 6.4.2017
Pepperoni – A framework for spicing up your mobile apps with React Native by Tino Junge
Slides: slideshare.net/futurice/pepperoni-a-framework-for-spicing-up-your-mobile-apps-with-react-native
Sydney, Australia
React Sydney
Faster Feedback Loops for mobile app development (56:54)
Brent Kerr (BCG Digital Ventures) and Matt Davies (Readify)
Traditionally, it can take weeks or months to build and release changes to native mobile apps, partly due to Apple’s approval process. But with React Native, we’re able to bypass the app store and push updates direct to devices. This means we can bring the Build/Measure/Learn loop down to a matter of minutes! Central to the talk will be a LIVE DEMO, using a real mobile app available on the app store, called “GetSport” https://getsport.mobi/
React Code Splitting and Long Term Caching (28:12)
Vaibhav Venkatesh Namburi (Five2One)
We’ll talk about route level splitting and vendor caching. With Webpack 2’s tree shaking we can also work with lazy importing components.
Intro to React Fiber (11:14)
Mitchell Donaldson (GoRepp)
Introduction to React Fiber and how it will effect us
ReactJS Show and Tell: Guild Wars 2 Armory (23:10)
Michael Dougall (Guild Wars 2 Armory)
Michael Dougall has been developing Guild Wars 2 Armory for over a year now – hear about how Michael converted his front end from Angular to React, made components to share, automated everything, abused aws, and did it all for learning and fun.
Tel Aviv, Israel
React Israel
* { css-in-js: overflow } (47:59)
Nickolay Ribal (CodeValue)
While JS and HTML have progressed incredibly in recent years, CSS is the last bastion of old-school web development which we all love to hate.
CSS-in-JS is the latest attempt at solving this hard problem. If it succeeds, CSS-in-JS will fast-forward CSS into the modern era. Moreover, it will revolutionize how we compose, maintain, share and optimize styling across the modern web, native apps and even work with designers and product people.
Nickolay Ribal will present an overview of the history, evolution, challenges, current solutions and benefits in this exciting landscape!
Enhanced dev workflow with Storybook (54:46)
Vladimir Novick (CodeValue)
React Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Vladimir Novick, Web Architect & Consultant at CodeValue, will do a hands on demonstration of React StoryBook, diving deep in to work process, writing stories for a demo app, adding test coverage and live documentation.
Jakarta, Indonesia
React Indonesia
Easy React Native with Exponent (29:35)
Simon Sturmer (KodeFox)
https://github.com/kodefox/exp-react-id
React Amsterdam is a celebration of good things coming together: React that rocks and spring in Amsterdam that blossoms.
A full-day, two-track conference on all things React, gathering Front-end and Full-stack developers across the globe in the tech heart of Europe. After a very successful event in 2017, we’re coming back with a new gig on April 13, 2018. Mark your calendars for the biggest React community event.
A full-day, two-track conference on all things React, gathering Front-end and Full-stack developers across the globe in the tech heart of Europe. After a very successful event in 2017, we’re coming back with a new gig on April 13, 2018. Mark your calendars for the biggest React community event.
Live Stream of the whole React Amsterdam 2018 Conference (10:11:12)
Testing & React Native: Lessons from the Battlefield (29:57)
Aaron Greenwald (Wix)
Wix has been about cutting edge web development for a while, and we’re all about TDD. When we started mobile with RN, we struggled to replicate our test-heavy workflow that we’d grown to love. We lacked tooling, best practices, and general know-how.
In this talk, you’ll hear about what works and what doesn’t. You’ll find out what methods we tried and rejected so you won’t have to make the same mistakes, and you’ll get pointers toward approaches that we’ve found work so you can get started on the right foot.
Styling React/ReactNative Applications (33:59)
Max Stoiber (Space Program — Spectrum)
React popularized a new way of building user interfaces – components. By splitting our app into small, digestible parts the system as a whole becomes a lot easier to understand.
CSS was made in an era where documents were the height of the web. It doesn’t fit easily into component-based systems, making styling one of the pain points of building React applications.
What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate solution? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about styling in this new paradigm. Let’s talk about what we thought about and why we arrived where we did – styled-components.
CSS was made in an era where documents were the height of the web. It doesn’t fit easily into component-based systems, making styling one of the pain points of building React applications.
What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate solution? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about styling in this new paradigm. Let’s talk about what we thought about and why we arrived where we did – styled-components.
Universal React (28:46)
Mike Grabowski (Callstack.io)
React Native opens up the world of mobile development for many of us, front-end engineers. It not only allows us to use technologies we know already, like React, to provide first-class native experience to our users, but also to support many platforms, like Android and iOS at once, from within the same codebase.
This talk will explore various patterns that turned to be useful over the course of few projects I did. It will also demonstrate techniques that can be used to write truly universal apps, ie. ones that share core across web, native and more.
Complexity: Divide and Conquer! (27:03)
Michel Weststrate (Mendix)
“Reactive programming” still sounds scary to many developers. As if it is an elevated way of thinking, only accessible to the chosen few. Nothing is less true! It is the most natural way to look at programming problems. You just might not realize it yet! In this talk, Michel will demonstrate that many complex UI problems, such as form validation and routing, can all be seen as ‘*actions* that change *facts* which leads to *reactions*’. And as soon as we start distinguishing those concepts in our applications; our code will become more declarative, more concise and less imperative.
How Pinterest Switched Their Template Rendering Engine to React (37:48)
Jessica Chan (Pinterest)
A deep dive into how Pinterest migrated their web infrastructure to serve React pages, which required moving a huge amount of code without breaking the site. Details on the legacy stack (Django web server and Nunjucks/Jinja template rendering) moving to Node and migrating our templates to React.
Asynchronous & Offline Magic Tricks on React Native (27:31)
Woody Rousseau (Theodo UK)
Javascript has provided us with amazing ways to handle asynchronous logic to provide the best user experience possible.
React Native is today the best tool to build mobile apps fast, but require extra care when managing asynchronous & offline logic: most people are often going to use your app with weak to no network.
Get ready to get your app to the next level when you learn how to handle these edge cases
Flow Typing a React Codebase (30:06)
Forbes Lindesay (Facebook)
Adding type checking to your code can be a frustrating experience at first. In this talk, Forbes will help you through that initial stage by identifying some of the problems you’re likely to experience and giving you the tools to work through them. We’ll cover adding types to code that initially looks too dynamic to type, adding runtime type checking (and whether that’s a good idea) and finally, how you publish your type checked modules to npm.
A Real-World GraphQL Application in Production (28:06)
Stefano Masini (Balsamiq)
At Balsamiq we are rolling out our new web-app to production. A real-world application with real-time collaboration, built using Relay, Redux, node.js, Redis, etc., running on AWS using Convox. Even at small/medium scale, if you’re serious about building a good product you will eventually have to build a complex stack. I will share a few lessons learned in the process: how to structure the code, implement reactivity, writing tests.
Introduction to ReactVR (31:27)
Nik Graf (Serverless)
Many web developers haven’t explored WebVR yet. Building 3D Worlds was an intimidating endeavour. Especially with ReactVR there is no reason for that anymore. The talk kicks off with the basics of WebVR, shows how to build and navigate rooms using panos in ReactVR. Next it shows how to create a couple 3D meshes and how put together a small world using them.
Make Linting Great Again (7:13)
Andrey Okonetchnikov (Feedly)
No other topic in software development probably has so much controversy as linting. With a wrong workflow linting can be really a pain and will slow you and your team down. With a proper setup though, it can save you hours of manual work reformatting the code and reducing the code-review overhead.
Navigating React Native Navigation (31:58)
Kurtis Kemple (Major League Soccer)
When you start out on React Native project, there is a certain sense of awe as the package manager delivers the first bundle to the simulator. You quickly add some hello world text and maybe even a Pokemon image. Things are really starting to look up…
And then you need to add another view and you realize that you need to navigate somewhere. So you check out the React Native Docs and are quickly greeted by IOSTabBar, Navigation, and NavigationExperimental modules. With so many different options in the core codebase you realize that it’s still a bit of an unsolved problem. Now you’re looking at 3rd party integrations… and you start to wonder, just how should you implement navigation?
This talk will outline the different approaches to navigation available in React Native and in the RN eco-system, and the pro’s and con’s of each solution.
Demystifying GraphQL Clients (25:01)
Cris Biscardi (Dropbox)
Find out how choosing a GraphQL client can impact development. From Relay to template strings, we will explore topics such as modularity, schema checking, and static analysis.
Fun With Fiber Custom Renderers (27:14)
Ken Wheeler (Formadible)
In this talk I will be detailing how to create custom renderers using the new Fiber architecture, and showing examples exploring some fun things you can do with them.
Sequencing Audio Using React and the Web Audio API (32:13)
Vincent Riemer & Bruce Lane
Generating your client validation rules (5:55)
Ronald van der Kooy (Evision)
Building Applications for the Studio in the Cloud at Netflix (5:54)
Feather Knee (Netflix)
Using React to write a decision-making tool for the production studio at Netflix. Our application interacts with a large number of data models. We have to take very complex information and distill it so it can be more easily understood. Design challenges and solutions. How we developed the various components of our UX toolbox. Development process that includes writing unit tests in parallel with application development. How automated testing alongside application development informs our development process.
Pushing Bugs to Prod Responsibly with React and Redux (31:51)
Alex Castillo (Netflix)
The question is not how to avoid bugs when building software. There will always be bugs. The question is how quickly can you recover from them. Let’s go through some ways you can give your app the ability to notify you of these bugs before your users do using React and Redux. Start pushing bugs to prod responsibly.
Test Like It’s 2017 (29:27)
Michele Bertoli (Facebook)
Testing UIs has always been a hard job. In the components era, there are new tools and solutions available that transform completely the way we approach testing. From snapshots, through end-to-end frameworks, to style guide testing. In this talk, we’ll see some modern (and creative) testing solutions.
Coding Mobile with the Pros (22:58)
Gant Laborde (Infinite Red)
React Native mobile just got easier. Learn how to tap into rapid development by using what the pros are ready to give you!
Web Like Release Agility for React Native Apps (40:14)
Parashuram N (Microsoft)
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.
React Native Touch & Gesture (27:43)
Krzysztof Magiera (Software Mansion)
React Native allows for building great native apps by utilising native mobile components. Apparently handling touch and gestures is quite tricky as it often needs to interact with the application code which runs asynchronously in the javascript VM. This talk is going to be about how the gesture system has been designed and implemented in React Native and how to use it to stay out of trouble.
Advanced SSR Caching with React (8:17)
Robert Haritonov (Zoover)
Performance Limitations of React Native and How to Overcome Them (28:58)
Tal Kol (Wix)
React Native holds great promise in terms of excellent developer experience with JavaScript and code reuse between platforms. The big question is – do these benefits come at the price of performance? How well can React Native hold its own against purely native implementations?
React Europe 2017. (Paris, France)
Roadmap for React — Fiber and Beyound (25:40)
Andrew Clark (Facebook)
What I Learned Benchmarking React (16:56)
Dominic Gannaway (Facebook)
Building High-Quality JavaScript Tools (24:36)
Christoph Pojer (Facebook)
La nouvelle vague (28:00)
Sunil Pai
The new wave of frameworks won’t be frameworks at all.
In this talk, Sunil will explore how compilers and bundlers will replace certain runtime dependencies, without degrading the development experience that we all love and depend on. We’ll discover strategies of incorporating these ideas into any regular app, how we can leverage component models from react/vue/ember etc to enhance these ideas, and my own take on tooling in this framework-less world.
In this talk, Sunil will explore how compilers and bundlers will replace certain runtime dependencies, without degrading the development experience that we all love and depend on. We’ll discover strategies of incorporating these ideas into any regular app, how we can leverage component models from react/vue/ember etc to enhance these ideas, and my own take on tooling in this framework-less world.
Worse is Better: The Upside of JavaScript Fatigue (22:56)
Kevin Lacker (Facebook)
What WebAssembly means for React (33:05)
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.
Imperfection (30:17)
Cheng Lou (Facebook)
Practical Confidence: Using Types to Help Your Computer Help You (28:23)
Adam Perry (Expo)
Maximally Modular Apps with React Navigation (21:36)
Eric Vicenti (Facebook)
If only React Native apps could be highly extensible- such that a single experience within an app could be published and installed into other apps. If your screens are built with sufficient isolation, they can be portable between apps, platforms, and navigation implementations. In this talk, we will discuss how this ultimate modularity can be achieved simply by utilizing reducers and single-directional data flow. Then we will use React Navigation to quickly build a new experience with these techniques, and see how portable it really is.
How Streaming Can Supercharge React (30:19)
Sasha Aickin (former Redfin CTO)
React’s server-side rendering speeds up page load times, but it’s far from the only performance boost we can get on the server. In this talk, I’ll discuss how exploiting streaming and parallel processing on the server and browser can get us faster time to first byte, faster time to first paint, and faster time to full interactivity.
Next generation state management (24:47)
Michel Weststrate
Last years there have been great developments in state management libraries. Both Redux and MobX sprung from the React community and provide stand-alone, generic state management solutions. Both have gained big in popularity, and both have their own strengths and weaknesses. What can we learn from both approaches? Can we get the best of both worlds? Can we add a little Boabab and Cerebral to the mix? Is it possible to create a transparent reactive, snapshotable state container. With support for JSON patches, replayable actions, serialization, complex object graphs. With Redux & MobX compatibility, strong typing and runtime type checks out of the box. Get a glimpse of what next-gen state management might look like with mobx-state-tree. Largely designed by the MobX community and enforcing many best practices that have evolved over the last year.
Composition (32:57)
Nik Graf (Serverless)
The making of Twitter Lite (22:10)
Nicolas Gallagher (Twitter)
Twitter Lite is a complex PWA built with Node.js, React, Redux, Service Workers, and Webpack. This talk will cover how our team designs and builds one of the world’s most visited web apps. You’ll also hear about React Native for Web; how we approach network and render performance challenges; and how we use new web platform features.
The runtimes of React VR and use at Oculus (28:49)
Mike Armstrong (Oculus, Facebook)
Authoring VR content is time consuming and technically challenging, I’ll be providing an overview of how we are using the core strengths, merits of React Native and building on it to drive and improve app development within Oculus. I’ll go into more detail about the runtimes of both the native Android version and WebVR versions and how we utilize the improved engineer workflow the technology gives us access to.
Functional && Reactive (31:16)
Preethi Kasireddy
With the advent of libraries like React, Redux and Immutable.js, it’s clear that there’s a shift away from imperative and object-oriented in the front-end towards a more declarative and functional approach. Meanwhile, libraries like RxJS and Mobx are spreading the use of Reactive Programming to model UIs via discrete, asynchronous event streams. How can we combine the best of both functional and reactive paradigms to model and build predictable UIs that control themselves?
In this talk, Preethi will explain what “Functional Reactive Programming” is, how close React / Redux / Mobx / RxJs and others come in realizing Functional Reactive Programming, and what’s still fundamentally missing from these tools to achieve a true implementation of FRP. Lastly, she’ll describe when and why FRP is suitable (or not suitable) for building predictable and scalable UIs.
Relay Modern (27:32)
Lee Byron (Facebook)
React as a Platform: A path towards a truly cross-platform UI (27:17)
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.
Animating the Virtual DOM (31:05)
Sarah Drasner (Microsoft)
We are biologically trained to notice motion: evolutionarily speaking, our survival depends on it. For this reason, animation when done well can guide your users. It can aid and reinforce spatial maps of our interfaces, and give us a sense that we understand interactions more deeply. For this reason, animation is incredibly powerful to convey meaning, but only when done well.
But animating the virtual DOM comes with some intricacies that affect our implementations. In this talk, we’ll go over animating in React with a variety of methods, comparing and contrasting each. We’ll cover add-ons like ReactCSSTransitionGroup, using external libraries like GSAP, React-Motion, motion using RxJS, and transitioning state with D3. We’ll look inside some real systems, breaking down how we can create reusable components of animation principles for interchangeable yet cohesive patterns.
A Novel Approach to Declarative Animations in React Native (22:16)
Joel Arvidsson
Animations can make your app more pleasing to use and help the user understand state changes. This talk will give best practices on when to use them and an introduction of how to implement them in React Native with a deep dive into a new strictly declarative approach similar to CSS animations and transitions.
Putting the fun in functional with Elm (14:45)
Tereza Sokol
With React, Redux, ImmutableJS and friends, frontend development strive towards the functional approach proving to yield increased readability and maintainability. However, working in JavaScript, we never truly commit to the paradigm, but what if we did? The Elm language goes fully functional and as suspected, it comes with an ocean of benefits!
Integrating React Native with Native Infrastructure (13:02)
Mehdi Mulani (Facebook)
This talk will go over our approach of incremental React Native adoption within an already established native app. We will discuss the various problems that arise from using React Native in such a “hybrid” app model and in particular, discuss inter-app navigation and embedding React Native views into native shells and vice-versa.
Q&A Panel with Core team and speakers at ReactEurope 2017 (42:01)
The next episode—React Talks Q3 is going live in two weeks on 10/24, along with several new Talks series covering other technologies. Stay tuned, subscribe to the MeetupFeed newsletter and follow us on twitter.
The post 85 React talks recorded at meetups and conferences during Q2 — the first issue of MeetupFeed’s React Talks series appeared first on MeetupFeed.