What is the MeetupFeed project?

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

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.

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.

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 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.

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.

London, UK

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.

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.

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!

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

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.

Vienna, Austria

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.

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.

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).

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.

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.

Berlin, Germany

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

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.

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.

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

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)

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.

Sydney, Australia

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/

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

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!

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

Conferences

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.

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.

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.

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.

“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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.