ReactJS Day 2017
5 - 6 Oct 2017 at Best Western CTC Hotel

0

"Nobody knows how to do anything without Redux anymore. It's ridiculous." - @mjackson Let's fix it!

Everything starts with a good idea, but it takes a lot of work to make it shine. And when you do it, and people start using it, you feel the need to take it to the next level. And the next one, and so on, maintaining at the same time what it’s working in production. During this talk, we will talk about the experience, lessons learnt and good (and bad) ideas of designing a reusable components library with React, that led us to redefine the entire UI development process and front-end architecture @ MuleSoft.

In times where a jungle of JavaScript frameworks wants to solve every conceivable problem in web app development, creating headaches and javascript fatigue in the process, Elm offers a different approach. Elm is a functional programming language that you can use instead of JavaScript — or alongside it. It builds on the concepts virtual dom and unidirectional data flow popularized by React and Redux, but with a sound typesystem, built-in immutability, and an amazing compiler that catches errors before you even run your code. Simply put, Elm is a great language that will make your backend team jealous.
 In this talk you'll see how Elm works and learn how to use it to build a web app. I will emphasize the advantages and disadvantages it brings compared to React with Redux (my current JS favourite). This talk is not aimed at experienced functional programmers coming from languages such as Haskell, but rather JavaScript developers seeking a more functional approach in their daily work. It serves both as a introduction to Elm and typed, ML-style functional programming.

One of the main ideas of the react components is their reusability, but when it comes to the real projects we often see a lot of the “hard coded” components. Why is this happening? And even more important, how can we change this by using the latest tools (like React-storybook project) and understanding of the classical JavaScript design patterns?

React took the web development community by storm with its great success. Now there are also several "React replacement" libraries, which keep API compatibility but promise to be "better" in several ways (generally speed and code size), and some of them have been used in high-profile projects instead of the "original" React. And, last but not least, Facebook itself is rewriting the React internals, making the fiber-based version 16 a de-facto "API-compatible reimplementation". In this talk we'll see why these different implementation exist, how they differ from each other, and which one you should pick for your next project.

It's time to leave the 2D world of a browser window and venture into the world of VR JavaScript applications. During the talk we'll see how to make great VR experiences using just your browser and a bit of JS. We're going to explore the virtual world using one of the most popular JavaScript-based VR libraries: React-VR, along with live demos so we can see it in action!

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 the stack that makes up 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 20+ and what were the lessons learned?

I will be talking about how to achieve Shared Element Transition with React Native for both iOS and Android. Will explain the advantages of having a smooth continuous experience. And since React Native doesn’t support true shared elements, I will explain how we can achieve this with a clever trick of smoke and mirror.

StyledComponents is a new approach for building presentational components without any css preprocessors and with power of javascript. I would like to present example of building application based on styledcomponents with reused grid system built on FlexBox.

In this talk, we're going to explore the evolution of making a SPA with React. We're going to start with React's built-in setState, how it is complicated to maintain at scale, especially when it comes to sharing state and fetching data. External state management apps like Redux and MobX can definitely help with this problem, especially when the data is fetched from a REST endpoint. We're going to spend most of the time on the main point: Now that we're using GraphQL to take care of data management, is an external state management library even needed? Can Apollo coexist with Redux or MobX? What about server-side rendering and Next.js? What are the pros and cons of each combination? We'll find out what's the best way to approach this in 2017.

React is a wonderful tool to write reusable components but there is no clear definition on how a good API for theming and customization should look like. There are too many approaches when it comes to styling, and choosing one of those is a crucial decision, specially for vendor component libraries like http://react-toolbox.com/. In this talk we will go through some of the most important styling libraries, analyzing what should they cover from the point of view of a library of components, and using React Toolbox as study case. We will explore how customization and theming can be modeled for UI Kit projects with different tools. Finally, we will see a simple technique that allows one to write components that are agnostic from styling, without committing to an specific tool. This makes possible to switch between styling strategies over time and experiment with them while keeping the same component implementation.

MobX or Redux? Mutable or Immutable? Why not do both? Lets discover together MobX-State-Tree, an ongoing experiment to create an opinionated state management library that mixes mutable and immutable, OOP and functional programming, Redux and MobX