Modern UI Development With Node.js

Понравилась презентация – покажи это...

Слайд 0

Modern UI Development With Node.js

Слайд 1


Слайд 2

Слайд 3

Слайд 4

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

Слайд 5

e Brehm coins the m “isomorphic” om/isomorphic-javascript-future-web-apps/ Michael Jackson says “universal” is better https://medium.com/@mjackson/universal-javascript-4761051b7ae9 2011 2015

Слайд 6


Слайд 7

Step  0

Слайд 8

Use. Modules. http://mattsbrickgallery.tumblr.com/post/48739663720

Слайд 9

An IIFE is not a module! ES6 or CommonJS

Слайд 10

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

Слайд 11

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

Слайд 12

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

Слайд 13

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

Слайд 14

The code you write today is the code that will be copied tomorrow. https://pixabay.com/p-26556/?no_redirect

Слайд 15


Слайд 16


Слайд 17

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

Слайд 18

Слайд 19


Слайд 20

⌘+c ⌘+v

Слайд 21

Babel now!

Слайд 22


Слайд 23

ui components as classes

Слайд 24

Слайд 25

Слайд 26

These aren’t even mixins!

Слайд 27

They should be modules!

Слайд 28

UI components are modules

Слайд 29

Слайд 30

Слайд 31

Слайд 32


Слайд 33

The build pipeline is the foundation modern UI projects are built on. http://mdti.net/wp-content/uploads/2014/10/exterior-wall-crack-cropped.jpg

Слайд 34

Your build chain is your development lifeline. Treat it accordingly

Слайд 35

Each step is a module.

Слайд 36

Each module does one thing (demo)

Слайд 37

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

Слайд 38

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

Слайд 39

Use your build tool to automate mundane tasks. http://www.companiesandmarkets.com/Content/DynamicMedia/cms-uploaded/X-20140605161048330.jpg

Слайд 40


Слайд 41

just do it

Слайд 42

Test as you code

Слайд 43

Test as you code Test before you push

Слайд 44

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

Слайд 45

Tip! Make testing easy and people will do it.

Слайд 46

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

Слайд 47

Code  Quality

Слайд 48


Слайд 49

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

Слайд 50

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

Слайд 51


Слайд 52

Nesting is the worst thing to happen to CSS.

Слайд 53

You should never see this in css!

Слайд 54

Don’t let lint errors in your repos. https://odetojoandkatniss.files.wordpress.com/2013/12/gc-nope.png

Слайд 55


Слайд 56

push hooks

Слайд 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 http://www.sitepoint.com/introduction-git-hooks/

Слайд 58

This is your “Nope” button pre-commit pre-push pre-rebase commit-msg post-update post-checkout post-merge http://www.sitepoint.com/introduction-git-hooks/

Слайд 59

git push --no-verify

Слайд 60

Слайд 61

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

Слайд 62

Public shaming is a great motivator.

Слайд 63

Automate Adding Hooks

Слайд 64

Слайд 65


Слайд 66

business logic, maybe some sql

Слайд 67

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

Слайд 68

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

Слайд 69


Слайд 70

RESTful API’s JS template on the server

Слайд 71

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

Слайд 72

There is a large cost to context switching.

Слайд 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

Слайд 74

Make calls to async services Compose a template Send the response

Слайд 75

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

Слайд 76

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

Слайд 77

Keep your functional programming off the hot path.

Слайд 78

But what if?

Слайд 79


Слайд 80

RESTful API’s JavaScript

Слайд 81


Слайд 82


Слайд 83


Слайд 84


Слайд 85

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

Слайд 86

Calling a template with some data to produce HTML is easy

Слайд 87

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

Слайд 88

Getting your data can be really hard.

Слайд 89


Слайд 90


Слайд 91

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

Слайд 92

In React, statics are perfect for this.

Слайд 93

Слайд 94

Bind Falkor paths

Слайд 95

Load i18n strings

Слайд 96

Webpack & Browserify

Слайд 97

Слайд 98


Слайд 99

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

Слайд 100

Why not run bundles in Node? It only takes a few configuration tweaks http://jlongster.com/Backend-Apps-with-Webpack--Part-I

Слайд 101

0) Collect your node_modules

Слайд 102

Слайд 103

Not a “hot” code path

Слайд 104

1) Add another config to webpack.config.js

Слайд 105

Export an array

Слайд 106

Have multiple targets

Слайд 107

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

Слайд 108

No Node node_modules

Слайд 109

No css

Слайд 110

$> node build/server.js

Слайд 111

Next level Stuff

Слайд 112

Weback dev server & hot module swapping. (demo)

Слайд 113

Last thoughts…

Слайд 114

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

Слайд 115

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

Слайд 116

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

Слайд 117

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

Слайд 118

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

Слайд 119

References http://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wideweb--webdesign-8710 http://www.evolutionoftheweb.com/ http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ http://jlongster.com/Backend-Apps-with-Webpack--Part-I

Слайд 120


Слайд 121

Thank You. ranklam@netflix.com ryan.anklam@gmail.com

Слайд 122