Valeri Karpov

TAO: The Essence of Modern JavaScript

SLIDE LINKS

Redux, MobX, ngrx, vuex, and other state management libraries seem different on the surface, but the core idea is the same. The core idea is a departure from conventional MVC architecture, where "models" where responsible for tracking changes and notifying listeners of changes, to an architecture where all changes go through "actions" and stores subscribe to a stream of actions.

This architecture has 3 core concepts:

Types: data is represented by POJOs. The key distinction between types and conventional models is types are not responsible for change tracking. Instead, types focus on being serializable and easy to transfer via JSON. In particular, because types aren't tied to any backend data store like conventional MVC models, they're easy to make isomorphic. Actions: all changes in the system go through actions. Actions behave like functions, but actions also have an object representation to make them easy to inspect. Observables: while not all state management libraries use observables, every modern state management library has a mechanism to tie in to the stream of actions happening in the system and react to them. Redux has middleware, MobX has middleware, Vuex has plugins, and ngrx has analogous concepts like effects and meta reducers. The key idea is that side effects and cross-cutting concerns like logging are decoupled from actions. By their powers combined, these concepts make up the TAO architecture. In this talk, I'll demonstrate using the minimal tao library to build both a backend Express API and frontend React and Redux app using this architecture.

Vedran Blaženka

Creating fast and type-safe React apps with Reason

Learn how to use Reason and React to write simple and fast apps while leveraging type-safe code with both the JavaScript & OCaml ecosystem.

Sergej Jakovljev

Building responsive layouts for React Native

Building responsive websites became very easy with all the tools and frameworks that we have available at our disposal. Then React Native came and revolutionized how we build mobile apps. Still, creating responsive layouts that look great both on phones and tablets, of any size and resolution in RN is a pain. That's why we built React Native Responsive Layout library which makes it as easy as it is on the web. In this talk, I will present how to use this library, what problems does it solve and what is the benefit of using it over some other

Matija Marohnić

Writing codemods with jscodeshift

Our dependencies update quickly so frontend code often needs to be refactored to keep up. Doing this manually is manageable up to a certain point, but sometimes there is just too much code to update, and search & replace is very often not enough. This is what codemods are for—they are scripts that you can run across your files to refactor them. In my talk I'll introduce you to jscodeshift, Facebook's tool for writing codemods. Step by step you'll get familiar with JavaScript AST, I'll be extra careful to keep things at a very basic level so you can see the potential of refactoring code programmatically.

Hrvoje Bagarić

TypeScript and React - the complete solution

TypeScript has been around for some time now. With the constant monthly releases, it has come a long way. Its static typing and support for the upcoming JavaScript features makes it interesting for small projects as well as the large ones. With the @types modules, you can use almost every JavaScript library natively. It even had a first day support for the new fragments React syntax. So how does TypeScript behave with React? I will start the talk with the demo of TypeScript basic types and features. I will show how to setup your TypeScript with React project from tsconfig to webpack, even including tslint rules. To round up the talk, I will show how we can leverage TypeScript to write robust React applications.