React Next 2018
State of the React Ecosystem Ben Ilegbodu 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.
Advanced Patterns - Moving Beyond Presentation and Container Components Robert Herbst 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.
MonoRepos for the Masses Marcel Cutts 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.
Building a Maintainable UI with Storybook Norbert de Langen 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.
Motion in React Kaylie Kwon 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.
Hall AHall B 11:55
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.
Beautiful Abstractions: What I Learned Reading the Source-Code of 18 React Libraries Yonatan Mevorach 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
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.
Breaking Down Your Web App Patrick Hund 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!
Applying Microservices Design Patterns to Scale React App Development Itay Maoz 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.
React Responsively, Render Responsibly Yoav Niran 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.
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.
Hall A Hall B 14:30
How to Write Bad Code in Redux Adam Klein"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
This talk will explain all the problems I had and solutions that I used to port my native app written in C++, to a full React + WebAssembly app - while still keeping all existing features! Spoiler alert: At the end, it works.
Functional Programming Fundamentals Matthew Gerstman 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.
Migrating from Angular to React Maayan Glikser 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.
(Don't) Blame it on React Native Ofir Dagan 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.
My list to check out:
- Guppy (npm)
- Nevernull (npm)
- Immer (npm)
- FB and Lodash(flow,memoize)
- Breaking client app to npm modules
- Github code owner
- Electron Builder (npm)
- Why-did-you-update (npm)
- React Profiler
- React-sortable-tree (npm)
- React-mosaic (npm)
- React-virtualized + React-sortable-hoc (npm)
- React-pose (npm)
- Speakers work on github