Modern UI Development With Node.js

The Presentation inside:

Slide 0

Modern UI Development With Node.js

Slide 1


Slide 2

Slide 3

Slide 4

Worlds first web page launched Sir Tim Berners-Lee writes HTML, URI, and HTTP 1990 CSS Re 1991

Slide 5

e Brehm coins the m “isomorphic” om/isomorphic-javascript-future-web-apps/ Michael Jackson says “universal” is better 2011 2015

Slide 6


Slide 7

Step  0

Slide 8

Use. Modules.

Slide 9

An IIFE is not a module! ES6 or CommonJS

Slide 10

ES6 Modules ECMA spec browsers will (eventually) implement strict mode default named exports and imports

Slide 11

ES6 Modules spec had been under churn browser support coming along slowly transpolation can get messy cannot conditionally load them

Slide 12

CommonJS Node.js default module system A single syntax for all the modules conditional loading

Slide 13

CommonJS No strict mode default different syntax for browser and node conditional loading is a double edge sword

Slide 14

The code you write today is the code that will be copied tomorrow.

Slide 15


Slide 16


Slide 17

What is the first thing developers do when they start coding in a new project?

Slide 18

Slide 19


Slide 20

⌘+c ⌘+v

Slide 21

Babel now!

Slide 22


Slide 23

ui components as classes

Slide 24

Slide 25

Slide 26

These aren’t even mixins!

Slide 27

They should be modules!

Slide 28

UI components are modules

Slide 29

Slide 30

Slide 31

Slide 32


Slide 33

The build pipeline is the foundation modern UI projects are built on.

Slide 34

Your build chain is your development lifeline. Treat it accordingly

Slide 35

Each step is a module.

Slide 36

Each module does one thing (demo)

Slide 37

Rule of thumb If you have to require more than one plugin you might want to create another module.

Slide 38

Tip! Save your globs in a separate JSON file and require them into your build modules.

Slide 39

Use your build tool to automate mundane tasks.

Slide 40


Slide 41

just do it

Slide 42

Test as you code

Slide 43

Test as you code Test before you push

Slide 44

Test as you code Test before you push Test in you CI Server

Slide 45

Tip! Make testing easy and people will do it.

Slide 46

Easy is… fast automated easy to bootstrap having a culture of testing

Slide 47

Code  Quality

Slide 48


Slide 49

Why lint? catch common errors catch oops moments (console.log, debugger)

Slide 50

Why eslint? Style checker Pluggable Future friendly: ES6, JSX configure rules [ignore, warn, error]

Slide 51


Slide 52

Nesting is the worst thing to happen to CSS.

Slide 53

You should never see this in css!

Slide 54

Don’t let lint errors in your repos.

Slide 55


Slide 56

push hooks

Slide 57

For GIT Add these files to your .git directory’s hooks folder pre-commit pre-push pre-rebase commit-msg post-update post-checkout post-merge

Slide 58

This is your “Nope” button pre-commit pre-push pre-rebase commit-msg post-update post-checkout post-merge

Slide 59

git push --no-verify

Slide 60

Slide 61

Continuously Lint & Test Add your testing and linting as part of the build process and in your CI tool.

Slide 62

Public shaming is a great motivator.

Slide 63

Automate Adding Hooks

Slide 64

Slide 65


Slide 66

business logic, maybe some sql

Slide 67

business logic, maybe some sql php/jsp/asp/erb/etc

Slide 68

business logic, maybe some sql php/jsp/asp/erb/etc run some JS on the client

Slide 69


Slide 70

RESTful API’s JS template on the server

Slide 71

RESTful API’s JS template on the server interactive JS on the client

Slide 72

There is a large cost to context switching.

Slide 73

Proceed with Caution! Let node do what it’s good at, nothing more. Don’t block Don’t implement business logic fire & forget, take advantage of the message queue

Slide 74

Make calls to async services Compose a template Send the response

Slide 75

Some things have to be synchronous. Keep as many of those at startup as you can.

Slide 76

Be aware of the “hot” path! Code that will run with EVERY request.

Slide 77

Keep your functional programming off the hot path.

Slide 78

But what if?

Slide 79


Slide 80

RESTful API’s JavaScript

Slide 81


Slide 82


Slide 83


Slide 84


Slide 85

Don’t let the demos fool you! Universal JS is hard!

Slide 86

Calling a template with some data to produce HTML is easy

Slide 87

De-hydrating data in Node and re-hydrating client in the browser is HARD.

Slide 88

Getting your data can be really hard.

Slide 89


Slide 90


Slide 91

Use meta data to tell other modules what data the UI needs.

Slide 92

In React, statics are perfect for this.

Slide 93

Slide 94

Bind Falkor paths

Slide 95

Load i18n strings

Slide 96

Webpack & Browserify

Slide 97

Slide 98


Slide 99

Node code vs Browser code Client code is bundled, node code isn’t.

Slide 100

Why not run bundles in Node? It only takes a few configuration tweaks

Slide 101

0) Collect your node_modules

Slide 102

Slide 103

Not a “hot” code path

Slide 104

1) Add another config to webpack.config.js

Slide 105

Export an array

Slide 106

Have multiple targets

Slide 107

2) Tell web pack to ignore your requires for node_modules AND your CSS

Slide 108

No Node node_modules

Slide 109

No css

Slide 110

$> node build/server.js

Slide 111

Next level Stuff

Slide 112

Weback dev server & hot module swapping. (demo)

Slide 113

Last thoughts…

Slide 114

Start Small When Transitioning There are lots of learnings to be had from a single page

Slide 115

Routing Layer ( /path match ) Node Legacy Service Service Service

Slide 116

Iterate on Modules Modules don’t have to be perfect at first learn & refactor

Slide 117

Keep your code clean Don’t let bad code infect your repository.

Slide 118

Automate People are lazy. They will do the easy things and ignore the hard things.

Slide 119


Slide 120


Slide 121

Thank You. [email protected] [email protected]

Slide 122