Elapsed

00m

Modular frontend with NPM & pals

@Raynos

Overview

  • How to use modules in your app
  • Authoring small modules is great for collaboration
  • You can author self-contained UI widgets as modules
  • How to build your own custom flexible "framework" from modules

Tools of the trade

  • npm
  • browserify
  • unix

npm


npm is a package manager for JavaScript. It allows for easily authoring small modules without dependency hell

browserify

  • commonJS for browsers
  • supports node_modules
  • creates a single JS file


Check out browserify handbook

unix


Developers should build a program out of simple parts connected by well defined interfaces, so problems are local, and parts of the program can be replaced in future versions to support new features. This rule aims to save time on debugging code that is complex, long, and unreadable.

Using modules

The why?


  • Pick the best of everything
  • Use exactly what you need, no more
  • No lock in, freedom to switch whenever

Using modules

The where?


Demo time

Building a little app with modules

A small spinner app

Modules & Collaboration


People can re-use & expand on the small modules you build

xhr


A module that does one thing, sends http requests

And its dependents


Building a modular "framework"


  • Decompose the problem space
  • Work from the ground up
  • Solve each problem well in isolation

A unidirectional approach


Observable & Immutable state

A unidirectional approach


Representing input

A unidirectional approach


Rendering the view

Demo time

Publishing UI components as modules

Using a github widget module

Demo time

Building your own unidirectional app with modules

A unidirectional demo

Overview

  • How to use modules in your app
  • Authoring small modules is great for collaboration
  • You can author self-contained UI widgets as modules
  • How to build your own custom flexible "framework" from modules

Thanks.

@Raynos