ECMAScript 6+

& Wallet-Admin

Vít Jouda

vit.jouda@gmail.com

Agenda

WTF is Wallet Admin

 

Quick Introduction to ECMAScript 6+

 

Building blocks of modern web applications

 

Extending Wallet-Admin (live coding example)

ECMASCRIPT vs. JAVASCRIPT?

JavaScript - introduced by Sun Microsystems in 1995 as a part of Netscape explorer

ECMAScript - standardized language specification in 1997

Followed by dialects by other vendors e.g. JScript (MS, IE 3.0)

European Computer Manufacturers Association 

Wallet-admin

Administration tool of the Wallet ecosystem

 

Automatization of maintanance tasks to reduce developer overhead

 

Public interface - easier for clients to communicate basic request (e.g. onboarding)

 

 

Technology

Separated FE and BE

 

    React based Single Page Application
 

    Spring Boot based REST API

 

Developed side by side with the new architecture design - integrates Spring Cloud services

 

Material-UI

ES 2015+

Big changes to ES ecosystem

 

Adds many syntactic-sugar and functional features:

    modules, classes, promisees, arrow functions...

 

To date, only few browsers support whole ES 6 specification in their top versions - viva la Babel

Basic characteristics

Dynamically typed

 

Imperative with declarative elements

 

Multi-paradigm - prototypal, functional, OOP

 

Almost everything is an object (even functions)

 

Single-threaded (event loop)

 

Heavily asynchronous (callbacks, Promise)

Common misconceptions

ES engine has only single thread

 

There is no private scope

 

There are no types

 

I can´t live without static types

 

Classes represent object-oriented inheritance

 

 

Building blocks of modern spa

Package manager (NPM, Yarn, ...)

 

Transpiler (Babel, ...)

 

Module bundler (Webpack, Browserify, Rollup, ...)

 

Application FW / view layer (React, AngularJS, Vue, Ember, ...)

 

Model management (Redux, Flux, RxJS, ...)

 

CSS management (JSS, CSS modules, Sass...)

 

Test FW (Jest, Jasmine, Mocha, ...)

Node package manager

Ships with NodeJS

 

Has custom repository - https://www.npmjs.com/

 

Allows to define custom commands

 

Can be used in place of a build system

 

Basic commands - install, start, run, test

Babel

Code transpiler for ECMAScript

 

Core module (syntax analyzer, parser, ...)

 

Plugin system, ships with large base of plugins to support standardized and upcomming ES features

 

Plugins are grouped to presets - yearlies, env, experimental...

Webpack

Converts module graph to code bundles

 

Allows to modify module loading via custom loaders

 

Supports custom plugins - large amount of webpack and 3rd party plugins

 

Implements tree shaking (Michael Jackson script)

 

Supports hot code reload with webpack-dev-server

react

UI FW developed by Facebook, maintained by Facebook and the community

 

Handles only UI of the application

 

Maps application state to HTML

 

Custom enhanced component syntax - JSX

 

There are 2 main component types - statefull and stateless (functional)

redux

State management library

 

Key concepts

    immutability of the application state

    pre-defined set of actions and reducers

    subscriptions to state changes

 

Can be used separatelly but has many bindings to React ecosystem

JSS

CSS in Javascript

 

Default styling solution used in Material-UI

 

Fast, pluginable

 

 

Jest

Testing framework developed by Facebook

 

Supports BDD style tests

 

Syntax derived from Jasmine

 

Module mocking, mock functions

 

Supports snapshots - great for UI testing

last but not least

ESLint

    code linter, keeps codebase clean, enforces certain       code-style, plugins for all major IDEs

 

Enzyme

    react testing library by Airbnb, helps with component      unit and integration testing

 

React-router

    declarative and composable routing library for React