Este.jsThe End of the Great Schism

daniel@steigerwald.cz

Why full stack development is so hard?

1. huge js fragmentation - 40% of a developers time is spent in learning

2. permanent client/server languages/tools/libraries schizophrenia - developer has to learn/write/change things twice!

3. endless fight against app state a structure; class model and inheritance - 40% of a developers time is spent in debugging and refactoring

Let's face it: We are hardly productive 10 % of our time.

For next several years at least.

Este.js to the Rescue.

Huge JavaScript fragmentation

Angular, Backbone, jQuery, Meteor, MarionetteJS, Dart, KnockoutJS, mustache.js, Ampersand.js, Grunt, CoffeeScript, broccolijs, and more…

Solution: Be modular, minimize vendor locks and bus factors. Choose only well supported stuff unless you have pretty good reason to not.

Mail I got recently...

"Daniel, I went away for a few weeks and when I came back my engineers had changed us from Angular to React! I thought you'd find this funny - as in you told me to use React instead of Angular almost two years ago. Oh, wait, does this put us back into the running for possibly consultancy with you?"

medium.com/este-js-framework/whats-wrong-with-angular-js-97b0a787f903

● Facebook library for building user interfaces● Laser focused with minimal API● Huge adoption● Facebook is open sourcing only dog fooded stuff

There are many awesome features, but the most important is the fact, that React replaces imperative mutated API with the declarative API. Yes, for iOS and Android as well.

React

Client MVC hell

In MVC, a Model can be read by multiple Views, and can be updated by multiple Controllers. In a large application, this results in highly complex interactions where a single update to a Model can cause Views to notify their Controllers, which may trigger even more Model updates.

= hard to reason about and debug cascading changes

Flux

● CQS - Command Query Separation● actions, stores, dispatcher● unidirectional data flow● = keeps things predictable

In Este.js, Flux is pure - no framework, no state.

nulogy.com/articles/what-the-fluxmedium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e

Flux Action - it's basically command design pattern.Cimrman's sidestep: blog.confluent.io/2015/01/29/making-sense-of-stream-processing

Flux Store - reduce/sort/filter app stateAwesome combo with github.com/facebook/immutable-js. Forget about Underscore.

Flux Dispatcher - pub/sub

Flux

ES6/7/whatever

● JavaScript as language rocks - babeljs.io○ Ich bin ein BabelScripter! ES6 + ES7 + JSX + Flowtypes

● npm is the largest module repository● no dependency hell● writing functional and async code is much easier

No more client/server schizophrenia

● Everybody wants server side rendering, even Angular 2 is planning it. Ember has demo already.

● Meteor is not solution. Closed ecosystems suck.● With good design it's pretty easy.

Solution: Use one language and isomorphic approach

Endless fight against app state a structure

● en.wikipedia.org/wiki/Elephant_in_the_room● state is evil, state-less actions, state-less stores, CQS

○ github.com/facebook/immutable-js● global app state with cursors

○ In Este.js, press ctrl-save-s, then console.log(_appState)● composition over inheritace

"Inheritance locks you into the first shitty design you come up with." Dan Abramov

Endless fight against app state a structure

● App model built ad hoc, just like with TDD, but without TDD.● DI container is workaround for distributed state in many classes● Function > Class● Class is piece of mutable state, and state is root of all evil.

Class and inheritance is the wrong pattern most of the time, but the first thing people try.

Endless fight against app state a structure

● live checking code syntax for JS/HTML/CSS/whatver● eslint● webpack React hot reload● pendings actions● sync/async validations● localizations● jest testing with automocking● LESS, SASS, Stylus, or plain CSS with autoprefixer.● … and much more

What else Este.js provides?

● Relay - gist.github.com/wincent/598fa75e22bdfa44cf47● js-csp - CSP channels for Javascript (like Clojurescript's core.

async, or Go)● Leverage Webpack loaders for Clojure or PureScript or whatever.

○ twitter.com/swannodette/status/574986800466370560● React Native and A Dynamic, Crazy, Native Mobile Future

Future

● I don't see any reason to start a new project in PHP/Ruby/Whatever. Sure you can use Clojure, Elm, or even PHP, but you must be aware of aforementioned issues.

● Don't create classes messed with state unless you have pretty good reasons to do that. Immutability and functional programming is a thing you have to learn right now. It's easy with Este.js

● Maybe Ember can compete, but there is huge legacy stuff.● Este.js is now only about patterns and practices. Frameworks are dead.● Static pages or dynamic app? False dichotomy. Now Este.js is just fine for coders as

well. Part of your app will always be static, and you can add interactivity anytime later. No need to change stack or learn new one.

Final thoughts

http://javascript-skoleni.cz

I'm hiring.

twitter.com/steida