Modern UI Development With Node.js


The Presentation inside:

Slide 0

Modern UI Development With Node.js


Slide 1

@bittersweetryan


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 https://medium.com/@mjackson/universal-javascript-4761051b7ae9 2011 2015


Slide 6

<code>


Slide 7

Step  0


Slide 8

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


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. https://pixabay.com/p-26556/?no_redirect


Slide 15

ES6


Slide 16

ES2015


Slide 17

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


Slide 18


Slide 19

⌘+c


Slide 20

⌘+c ⌘+v


Slide 21

Babel now!


Slide 22

classes


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

<build>


Slide 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


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. http://www.companiesandmarkets.com/Content/DynamicMedia/cms-uploaded/X-20140605161048330.jpg


Slide 40

testing


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

eslint


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

csslint


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. https://odetojoandkatniss.files.wordpress.com/2013/12/gc-nope.png


Slide 55

How?


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 http://www.sitepoint.com/introduction-git-hooks/


Slide 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/


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

<serve>


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

RESTful API’s


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

RESTful API’s


Slide 80

RESTful API’s JavaScript


Slide 81

Isomorphic!


Slide 82

Unimorphic!


Slide 83

Isomorual!


Slide 84

Universal!


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

Don’t


Slide 90

Do


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

Eac


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 http://jlongster.com/Backend-Apps-with-Webpack--Part-I


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

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


Slide 120

Questions?


Slide 121

Thank You. [email protected]flix.com [email protected]


Slide 122


×

HTML:





Ссылка: