ECMAScript 6 Architecture Workshop

 https://github.com/barbarosa/ECMAScript6_architecture

What is it about?

 

  1. Setting up a project from 0 step by step
  2. Keep the application minimalist and only add what it's needed
  3. Create decoupled and reusable code that it's simple to read and understand
  4. Use modern libraries for linting, transpiling into cross browser supported JavaScript
  5. Structure your application using small reusable modules
  6. Keeping the application free (not locked into a certain design pattern unless you need something)
  7. Keeping same concept no matter of the chosen technologies (the presented ones can be replaced with others)

 Part of architecture: Choosing Technology and following software engineering laws and best practices

What cannot be changed

JavaScript v. 5

IE8/9? 

+

The nice part 

Maintainability

Small units of code

 unit tested

Reusability of components

Easy to understand code, simplicity

Traceability of the system

Determine Input & Output for each unit

things that you can choose

Writing Javascript vs transpiling into browser supported Javascript (ECMAScript 5)

"Compiled apps now match or beat handwritten JavaScript" 

from The Register Jan 2014 (long time ago)

Now in summer 2015 ...

Transpiled programming:

The programming language

All try to solve some problems  or to enhance  JavaScript v. 5 to be better:

  • in maintainability breaking units easier,
  • enhance reusability,
  • to have new features to handle asynchronous operations
  • to access easier more already developed packages and libraries ... and more

ES6 (chosen) technology + infrastructure

Start with only what it's needed and add as it goes! (no yeoman needed)

Deciding the infrastructure specific around ECMAScript 6:

what we need:

  • transpiler
  • package manager
  • build tool
  • a way to use node.js packages

+

Deciding the larger infrastructure tool

  • Operating system that supports node.js/npm
  • Code editor that supports autocomplete/code linting/ run tests
  • Unit test library and setup
  • Versioning tool like git
  • Remote repository github/gitlab/bitbucket
  • Code Editor configs and decide a coding standard

This tool save time and provide a better life to the developer :) !

Start setup

Setup NPM and project description

NPM: 1. package.json

 

 

npm init

package.json contains both development modules and devDevelopment modules used to build the application

create packge.json:

eslint (supports es6 linting)

touch .eslintrc
npm install eslint -g
{
  "env":{...}
  "ecmaFeatures": {...},
  "rules":{...}
}

Setup linting

rules can be airbnb style but let's start simple

{
  "env": {
    "es6": true    
  }
  "ecmaFeatures": {
    "modules": true
  }
}

es6!

 

 

why mocha: simple, flexible. fun :) (from their website)

Setup unit tests

touch mocha.opts
--require babel/register

es6!

4. to run example unit test from npm:

#file: package.json 

#considering a test directory exists where the 
#package.json is located with a spec inside 


"scripts": {
    "test": "mocha --reporter list"
  },

1. setup with babel to transpile the code into javascript v. 5

5. run test

#from the console

npm test

2.install babel module

npm install babel --save-dev
npm install mocha chai --save-dev

3.install mocha & chai modules

what is chai? assetion library that support assert, expect and should and works amazing with mocha 

Start development

Requirement: build a basic example of a shopping cart application!

What do we need to start?

Choose the tools to enable us to obtain reusability, maintainability and focus on what we need to deliver!

1. reusable components 

could be simple handlebars templates, or ES6 template strings 

or isomorphic virtual dom  diffing frameworks depending on the project complexity

let's go for something cool!

component

Input:

data

we don't care at this point where the data comes from: could be server calls could be localstorage, user interaction 

Output:

html markup

could be svg, mobile app tags something that can be rendered and displayed!

The idea is the same:

2. states: components communication

    MVC?                                                        Flux?

start minimalistic ! (only what you need now)
flux / MVC introduce complexity and the architecture can get locked into a certain technology / framework that we don't need from the start

describe the states and use a central data structure as a channel of communication between components: 

Start with baobab.js

How do we start? Time to code

  • create main application entry point
  • make initial build process to transpile es6 and store it into a public/compiled directory using
  • create the two initial components and render them on the page
  • create initial data structure with initial states
  • add shopping cart service that talks to the data structure
  • unit test the components

The System

 

basket component

 

productList component

{data}

baobab

shoppingCart service

  • Components are decoupled and they only communicate with the service that changes the central state of the app!
  • Both the components and the service can be independently unit tested
  • Anything that alterates the data structure will trigger a state change in components 

file/directory structure

The entry point

app.js!

  • top of the tree
  • single point that interacts directly (without virtual-dom) with the DOM
  • renders the two React components 

 

'use strict';

import React from 'react';
//react components
import BasketComponent from './components/Basket.js';
import ProductListComponent from './components/ProductList.js';

React.render(<BasketComponent />, document.getElementById('basket'));
React.render(<ProductListComponent />, document.getElementById('product'));

es6!

The Component

 

basket

component

  • Determine component boundaries, what belongs and not to the component
     
  • Establish data, actions and behaviour of the component 
data are basket items: getInitialState method

actions to remove an item: removeItemFromBasket custom method

listeners when the component should re-render/update state componentDidMount method
 
  • Determine what to render the JSX format that will output the final markup

The service

Contains the additional processing of data and manipulates the central data structure 
linked with the data structure by baobab cursors

let shoppingCart = {

  addItem (item) {
    cursors.basketItems.push(item);
  },

  removeItem (item) {
    cursors.basketItems.splice([this.items().indexOf(item), 1]);
  },

  items () {
    return cursors.basketItems.get();
  }

};

Outputs clear and unit tested methods which components will rely on

shoppingCart service

The State

The heart of the application

===

Amazing baobab library

It is a data tree! Let's start with one and try to keep only one instance unless the application turns crazy in complexity

Why not react-baobab ? why not react + baobab + flux?

They are awesome libraries but let's start simple, and you might realise you might not need them or if the application grows in complexity they are easy to add in as mixins or a dispatcher

Conclusion

Understand your code! Make others understand it!

  • Use modern tools like ES6 as it is available now and it is the official evolution of ECMAScript
     
  • Start simple from 0 no initial scaffolding tools are needed as will modern build tools you can setup an initial production ready environment in minutes
     
  •  Use small frameworks or single purpose frameworks as data tree or a virtual dom component framework and not a major framework at the beginning as could lock you in a certain state of mind
     
  • Use NPM to get small modules and easy to replace when the case

Thank you

Made with Slides.com