The 2020 edition of ReactNext is an one-day community-driven event packed with advanced lectures by internationally renowned speakers, and networking opportunities with over 750 attendees from all around the world, that share a passion for React. 

ReactNext targets both beginner and experienced devs in two parallel tracks with sessions about React, React Native, Redux, MobX, and everything about the ecosystem.

ReactNext

2020

ReactNext is an one-day community-driven event packed with advanced lectures by internationally renowned speakers, and networking opportunities with over 750 attendees from all around the world, that share a passion for React. 

ReactNext targets both beginner and experienced devs in two parallel tracks with sessions about React, React Native, Redux, MobX, and everything about the ecosystem.

React Next 2019 Highlights

Web development changed dramatically during the last years. With the enormous amount of JavaScript libraries and the new HTML5 standard, today it is much easier to create web apps. 

When building a web app, you will probably want to reuse some of the web components you built. But how can you do that with the current state of HTML? One of the new and emerging web standards is Web Components. The Web Components standard enables you to create reusable web components that include HTML, CSS and JavaScript. Can we use Web Components with React or vise versa? This session will answer this question and explain the why and how to do such a thing.

I’m With Web Components and Web Components Are With Me

Repo:
https://github.com/reusablejs/reusable

React hooks shook the foundation of our React code, and how we think about state management. The long debated Redux vs. MobX theme has shifted to whether context + useReducer is an alternative, and whether state management is necessary at all. 

In this talk we will explore how we can use the benefits of hooks in state management, such as separation of concerns, declarative side effects, and simple code reuse.

State Management in a World of Hooks

Building large scale apps in the last years, lead me to a development process that provides rapid results and ability to scale. I want to show these technics, building a real world react app, using storybook, with DDD (design-driven development) and atomic design. 

Building an app is a complicated task. It starts with the flow from the product moving to design and then to the RND. However, it does not stop there, there is a need to go back and forth with the process as specs and design might change. Using DDD, we can leverage the ability to describe the spec visually, for the product and other stakeholders.

Using atomic design, we can create our MVP fast and ready for scale. Oppose to design systems, Atomic design gives us the granularity we need, and a way to compose our app parts very fast and stable.

Build React Apps Fast Using Storybook, DDD, and Atomic Design

Redux-sagas became a pretty common tool to handle asynchronous actions in the react-redux ecosystem. However, often I saw that not all asynchronous events are handled with it although redux-sagas have event channels which allow you to listen and react to any asynchronous routine (e.g. socket connections or external signals) and not just redux actions. 

Expect some live coding in this talk: We will implement a redux-saga event channel to catch signals of bluetooth beacons (why on earth do I try a hardware live demo!). Besides, this talk want to strengthen your understanding of generator functions (the backbone of redux-sagas). To this end, we will dive into a naive implementation of async-await to understand generator functions, and as a result, redux-sagas better.

Handle All Async Events in Redux-Sagas

Sharing code between web and native applications helps deliver consistent apps in an efficient way. Bringing code from web to native, our team manages to ship new features faster than ever before. Yet code reuse brings its own issues as well, and might not be the ideal solution for everyone. 

We’ll look at options of writing cross-platform apps and see how to leverage React’s clever rendering strategies to build apps as effortlessly as possible.

Anna is a javascript developer who loves working with new technologies. Currently working at Hive, she does full-stack development to deliver a great end to end solution focused on user experience.

Cross-Platform React – from Web to Mobile

What actually happens when you click your mouse in your browser window? 

In this talk you'll take a deep dive into how your web browser works and what actually happens when a mouse is clicked. You will also take a deep dive into what browsers do, how events work internally and why. 

Benjamin will go through how web automation tools like Puppeteer and Selenium simulate user actions, when that goes wrong and why. 

Ideally at the end of the talk you will have a much deeper understanding of how browsers dispatch events and could utilize that knowledge to write better front-end code.

The Anatomy of a Click

In the past few years, the buzz around functional programming has been growing, but it can be challenging to apply theoretical concepts to everyday work.

How can we make the code we work on more functional? What advanced patterns can you use, and why should you do that? And what do React hooks have to do with all this? In this talk we’ll have a look at real-life examples and patterns you can use to make React apps more functional.

How to use Functional Programming in your React app

Developing forms can quickly become complex, and the myriad of approaches and libraries only highlights the problem - there's so many different use-cases and no one-size-fits-all solution. It's time to formally model our forms. 

In this talk, we'll explore the current React form landscape and learn how hooks and state machines can be used to create abstract models of complex forms that greatly reduce dependencies on restrictive form libraries or complex custom components. With these abstract models, form logic can be automatically tested, simulated, analyzed, and visualized.

Formal Forms with State Machines

You noticed a button in your app is in the wrong color. You fix it and merge the code to your production branch. Congratulations! now it’s time for your code to meet your users. In a mobile app that means you just entered a few days (at least) of a build-test-fix cycle, and if that’s not enough you now have to wait for the store review of your new version. That means you wait for a week, if everything went smoothly, just for a small UI fix. That’s the nightmare of CI/CD on mobile apps. 

In Soluto we developed Dynamico. An OTA javascript code delivery framework that allows you to load React components dynamically. Come and learn how you can start using it to safely move faster!

https://github.com/Soluto/dynamico

Web Delivery Experience for React Native

Curious about React’s upcoming “Concurrent Mode”? Hear the story of early experiments with this new React feature at Facebook, and gain deeper understanding of how it works.

Ready for Concurrent Mode?

What are the essentials that every React developer needs to know today in order to keep up with the times? React has come a long way since its early days. New features are constantly added, and with them code patterns emerge. 

We will review some of the must-know features (portals, Suspense, hooks), introduce their rationale and use cases, and understand where they fit in our problem-solving arsenal as developers.

Modern React - The Essentials

DOM Reconciliation is the process of making the rendered page match the React component tree. Reusing elements is important for performance, and many of the best practices for building React apps emerge from the reconciliation process. Let’s break things to figure out how they work. 

In this talk we’ll look at an app that does everything wrong. As we fix the problems, we’ll see how React is able reuse more DOM nodes and reconcile the component tree and the DOM faster, recreating fewer nodes. By the end we’ll have a model for reconciliation that will give us a solid foundation for remembering best practices and building performant applications.

Reconciliation: The Root of Performant Applications

Micro-frontends - is it just a hyped out buzzword or do they live up to their promise? This talk will cover how we made the migration to micro-frontends following challenges we encountered. And will give a brief overview of some of the answers to the ultimate question, are micro-frontends worth the hype?

Micro-frontends: Is it a Silver Bullet?

Chatbots introduce a whole new way for users to interact with your websites. A good chatbot can save your users from long and complicated forms, cut down on support requests, and make your services more approachable. If you've ever wondered how do build a chatbot, then this session is for you. You will: 

Dive into the core concepts of what makes a chatbot.
Learn how to employ Machine Learning and Natural Language Processing to create a conversation flow that feels 100% natural.
Look at a variety of possible conversations and challenges that go with them.

But more importantly, you will learn how to build a fully functioning chatbot and add it to your React app in less than 15 minutes—all without a single IF statement.

Build an AI-Driven Chatbot

In this session we will walk start with a typical React app and see what we can do to make it shine in search engines. We will discuss what technical SEO means and how it looks like for React apps. We will learn about Googlebot, web app architectures, testing tools and common challenges and their solutions.

Technical SEO 101 for React Developers

Redux and React are frequently used together, and many people are familiar with the "Provider" and "connect" APIs from React-Redux. But how does React-Redux work, and why do we even need it in the first place? 

Join Redux maintainer Mark Erikson on a journey through the history and internals of React-Redux. We'll dig into: 

- How a UI layer interacts with the Redux store 
- The design goals that shaped the React-Redux API 
- How the React-Redux implementation has changed over time 
- What the future holds for React-Redux

A Deep Dive into React-Redux

So you’re done writing the core of your app. It got pretty hairy but you pulled through. You abstracted the business logic, broke down everything into components and mastered the flow of your app state. Good job! Go get yourself a victory cookie. 

Oh wait, you can’t, because a legion of designers and motion artists are headed your way chanting something about “storyboards” and “microinteractions”. How will that even fit in with your beautiful architecture? 

Unlike state changes which can be instantaneous, animations inherently take time to complete - and that’s a big problem. In this talk we'll learn how to orchestrate animations across multiple components with complex state, and how this theory is implemented in React Animation Orchestrator.

Managing Animations (Sanely) in (Insanely) Complex Apps

For most of us, “static sites” only work for simple sites, like personal blogs. But static sites can do so much more! In this talk, learn how Gatsby uses React and GraphQL to help you build apps that combine the performance and workflow benefits of static sites with the flexibility and power of server-driven sites, all in a modern dev stack!

Beyond Static: Dynamic Web Applications with Gatsby

Even if you are familiar with React Native, do you really know how it works? 

Did you know about the bridge which is the secret sauce of React Native and makes it work on every platform and gives you the option to create a Native-Like apps? 

In my talk, I am going to reveal that there is no magic in React Native. 

There is a real smart mechanism that lets the JS code communicate with the Native code. 

A major part of this mechanism is The Bridge which is written in C++ (wait..what??) and mapping between all you app modules and even lets you create custom ones of your own! 

In Addition I will talk about its new architecture. 

If you are a curious React developer who believes that knowing the internals of a library makes you a better developer, join me to the journey Under The Bridge.

React Native - Under the Bridge

2019

ReactNext is an one-day community-driven event packed with advanced lectures by internationally renowned speakers, and networking opportunities with over 600 attendees from all around the world, that share a passion for React. 

ReactNext targets both beginner and experienced devs with sessions about React, React Native, Redux, MobX, and everything about the ecosystem. 

The main premise of modern reactive applications is that they provide high-performance out of the box, making the user experience feel blazingly fast. Yet, there’s a limit to the magic that even React can pull off. There are times we need to help it, and often we might actually hurt the performance of our applications.

In this talk I will do a live demo of investigating and resolving performance issues such as how immutable state' can actually adversely affect performance or how inefficient selectors can lead to components unnecessarily re-rendering. Using the Chrome Dev Tools and other profiling tools provided by React itself, we will discover how to find what's causing slowdowns. Then we'll go through the best practices needed to make our app blazing fast again.

React Responsively, Render Responsibly

React! Babel! Angular! Ember! Meteor! Jest! All these beasts and more swear by the magic of the monorepo - a secret sauce all these impactful projects share. You’re intrigued, but you have questions. 

What is a monorepo? What does it offer my React projects? How would I even get to having a monorepo? Will my hipster cred be incredible if I get one?

Join me in answering these questions, highlighting both the joys and the tricky parts of the turning monorepo mythos into pragmatic reality.

MonoRepos for the Masses

There’s magic in every new beginning – building a new web app on a green field is every developer’s dream. A dream that can turn into a nightmare as the codebase grows, matures and finally becomes unmanageable. 

React is based on the concept of components. The idea is to compose your application of independent building blocks that you can easily reuse or replace with better ones. If you embrace this idea, you can keep your platform tidy and maintainable. If you don’t – well, you can write React spaghetti code just as easily as you can write jQuery spaghetti code. 

Patrick talks about his team’s constant effort to “componentize all the things”, to find best practices, strategies and patterns to constantly improve the code base. You’ll take away hands-on advice from real-world experience, to help you make your own code a little better every day, too!

Breaking Down Your Web App

The open-source React community has produced some amazing 3rd-party libraries that make React development as powerful as it is. But what does it take to create a "beautiful abstraction", a library that hides a lot of complexity into a simple API? To answer this, I took a journey into the source code of 18 different React libraries, including of course the "big ones" like Redux, React Router, etc.

In this talk we'll examine the patterns that these libraries share, and how you can apply them your own React Components

link to the slides:
https://noti.st/cowchimp/begO8Y/beautiful-abstractions-what-i-learned-reading-the-source-code-of-18-react-libraries

Lessons Learned Reading the Source-Code of 18 React Libraries

In the past few years, React and Redux have generated a surge of Functional and Declarative Programming which we often take for granted. However many of us never got a chance to learn the fundamentals.

In this talk, we’ll discuss the fundamentals of Functional Programming and how they apply to modern JavaScript. We’ll cover immutability, separation of concerns, and composability. We’ll avoid unnecessary jargon like monads and functors and stick to concepts that will make our code better.

Functional Programming Fundamentals

Immer is a tiny package that allows you to work with immutable data structures with unprecedented ease. It doesn't require learning new data structures or update APIs, but instead creates a temporarily shadow tree which can be modified using the standard JavaScript APIs. The shadow tree will be used to generate your next immutable state tree. This shadow tree is maintained using Proxies.

Proxies are an exotic javascript feature that is nowadays available in all modern browsers. What are they, how do they work and why should you (not) use them?

Join this talk to learn more about Proxies, or about how to deal with immutability data structures with a better DX as was ever possible so far. Brace yourself; your reducers will become twice as short without giving up on any of the semantic constraints.

Slides for the talk: (including source code of the demos): http://immer-react-next-2018.surge.sh

Immer, Immutability and the Wonderful World of Proxies

Storybook is a tool for developing UI components in isolation. And it's also for documentation and testing. 

I'd like to give you an overview of how to use storybook. But also I want to talk about what it's like maintaining a project like this. How did we go from 0 maintainers to 50+ and what were the lessons learned.

Building a Maintainable UI with Storybook

One of the first advanced React patterns we learn is to separate presentational, "dumb" components from state full and connected components called "containers". But it turns out there are a couple of other patterns that are useful when building larger react applications. 

This talk covers topics like how to inject services into your component tree, how to deal with different designs for different screen sizes when media queries just don't cut it, how to really keep presentation components clean and simple and where to put the complicated bits. It also touches on some of the dark arts of what's really possible with JSX.

Advanced Patterns - Moving Beyond Presentation and Container Components

It’s always fun to blame react native for everything that is wrong in our lives. However, what we keep finding, again and again, is that for most of the cases. Writing better performant react code can fix our performance issues. In the last couple of years our team built a huge production app in react native.

In this talk I’ll go over some of our lessons learned in regards of react native performance and how to improve your app’s performance subsequently.

(Don't) Blame it on React Native

TypeScript is JavaScript super set language that adds more capabilities to JavaScript and of course static typing.

In this short lighting talk we will have a practical demo to show you how to wire TypeScript language into your React app and Webpack build.

Wiring TypeScript into React

React and React Native allow for building truly amazing apps. As great as they are, having multiple teams working on a single, shared codebase is still a difficult task. It forces you to deal with issues such as accumulating tech debt, code ownership, and generally keeping everyone from stepping on each other’s toes.

The world of backend development has already moved from monolithing, single-process deployments to using microservices as the go-to architecture for development at scale.

In this session we will explore microservices design patterns, and learn how you can apply them to a React app, in order to scale the development of the app to multiple teams.

Applying Microservices Design Patterns to Scale React App Development

Many of us have products that have been here for a while and are written in older frameworks. Eventually we have to upgrade for various reasons but a full rewrite is a big risk for the company. 

In this talk we'll learn how to gradually migrate from angularjs to react without hurting the business bottom line. Share data and build hybrid features which are powered both by react and angularjs. Until the final day where we can delete our old code and have a brand new application.

Migrating from Angular to React

React has exploded in popularity. But it’s only a UI library, not a full-fledged framework like Angular, Ember or [insert latest JS framework]. We need to create our own “framework” by picking from the plethora of libraries in the React ecosystem. But which ones should we choose? Or better yet, which ones do we actually need? Do we need a Redux? What about handling styling, testing and routing, etc? How does it all come together?!!?!

Let’s walk through the tools and helper libraries that surround React. By the end of the session, you’ll have a solid understanding of the ecosystem and know which libraries you should prioritize learning first in order to confidently build your own React-based stack.

State of the React Ecosystem

"Redux forces you to write good code" - I've heard that sentence many times.
In fact - it's quite easy to write bad code with Redux, as I will demonstrate in this talk.

In this talk I will show some bad practices and techniques with Redux, and how to avoid them.
We will cover aspects such as code reuse, coding conventions, and architecture

How to Write Bad Code in Redux

React Native is a great way to build native apps for iOS, Android and other mobile platforms. In this talk, we will look at the internals of React Native, and how code written in JavaScript can power a fully native mobile application. We will look at the various parts of the system like the bridge, the UI manager and the plugins. We will also touch upon the rendering process and compare it to React's rendering on the web. We will look at some of the new and exciting improvements powered by Fiber, and talk about the the interesting experiments and upcoming features.

This talk stems from my experiences as a web-developer newbie on the React Native team, and is an attempt to document my journey in comprehending the code base. At the end of the talk, the attendees will not only be able to build React Native apps, but also understands how it all works together.

Building React Native

As client side applications are growing richer with interactivity, motion is entering the conversation as a critical part of user experience. With all the languages, tools, and APIs available, such as CSS Transitions/Animations, GSAP, and React Transition Group, how do you decide to choose one over the other?

This talk will be a comparison of several approaches to implementing motion in React, from using CSS-in-JS tools like Styled Components, as well as animating components with vanilla JS, functional libraries, or libraries more closely tied to the ecosystem like React Motion.

Motion in React

ReactNext 2018

2018

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.

What's New in React?

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.

Level Up Your React With TypeScript⁠⁠⁠⁠

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.

Webpack – The React Parts

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.

Universal React Apps Using Next.js

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.

The code for the lecture: https://github.com/500tech/middleware-lecture

Practical Advanced Redux

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.

React, But For Data

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.

Relay Modern or Apollo?

Gatsby is a modern JavaScript web framework that let’s 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.

GatsbyJS — How to Create The Fastest Sites In The World

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.

Handling Side Effects in Redux With Redux-Saga

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.

Things You Didn't Know You Can Do With React Native

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.

Get That CSS Out Of My JavaScript

Let's 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.

Critical ReasonML'ing

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 on Steroids with ClojureScript

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.

Dealing with Data Offline in Web Apps

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.

Write Once, Render Anywhere

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.

D3 and React, Together

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.

Bridges to React Native

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.

Detox — Graybox E2E Tests Library for React Native

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.

WebVR and React

2017

At Mendix we use MobX to manage the state of our visual enterprise application studio. In this talk we will take a look behind the scenes and see how MobX simplifies concerns like authentication, data fetching and routing. The strong decoupling of state and UI helps us to iterate on our UI more quickly. 

The architecture of the studio is pluggable and we will see how MobX helps integrating external producers and consumers of state into the product. In the end, we believe that this approach results in a code base that is sane and accessible. In which we get things done quickly.

Real World MobX

Rollup your sleeves, and lets dive deep into the ReactJS code and learn what happens between render() and DOM.

ReactJS: Under The Hood

In this talk, we'll discuss how future updates to React's core algorithm will unlock exciting new features you may not have even considered.

What's Next for React

React only provides the V in MVC -- the part which would usually be state free. But state is inherent to any app. And storing it in component state is kind of crap. So what is a React dev to do? Create a Model and Controller to go with the View!

The M and C in MVC

Wix.com is betting big on React Native for our official app, catering to over 80 million Wix users. Production of this scale comes with its set of challenges, especially when using a framework this young. This talk is about the challenges throughout the development lifecycle, applying practiced methodologies, gaps we faced and solved, and the ones we are still trying to solve.

Building a React Native App for 80 Million Users

Introduction to BDSM

DataLoader is the missing piece in the React-Relay-GraphQL stack, a utility for caching and coalescing data queries to optimize large, nested GraphQL queries. Digging through it's internals and in turn, JavaScript's internal asynchronous model, we'll see how DataLoader leverages Node's event loop and micro task management to coalesce database calls and dramatically improve upon caveats in common GraphQL-based apps.

High Performance GraphQL

React is a great library for declarative programming - but what happens when you need to work imperatively? In this talk I'll demonstrate edge cases I met while implementing performant canvas-based image viewer using React - and how I overcame them.

Overcoming React's Limitations

At Callstack.io, we have been working on the media player for one of our clients on both iOS and Android and decided to do it in React Native. React Native itself doesn't provide any APIs to control lock screen, bluetooth headphones or music playback thus they all have to be written. In this talk, we will check how all the above can be added to React Native with native modules while still being 100% reusable and easy to maintain.

Building a Fully-Fledged Media Player in React Native

Testing Frontend code is painful. You can either do small unit tests that don't check a lot, or you have to use automation tools to test your code in a living browser. There is a third alternative, which can be a very natural way to test your code - run your frontend code under Node! The benefits are enormous - simple debugging, no need for transpiling and bundling, and no need to raise a server to run the tests.

An Ode to Node: Testing Frontend the Backend Way

Some state management libraries for ReactJS provide a taste of Functional Reactive Programming, but to really cash in on FRP you must fully embrace it. That's why at NSO we've developed a Functional Reactive Flux architecture by harnessing the power of RxJS - and we now have completely predictable state and UI. In this talk we will go over the merits of FRP and share our journey from idea to production.

Israel