'

Modern UI Development With Node.js

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





Слайд 0

Modern UI Development With Node.js


Слайд 1

@bittersweetryan


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

<code>


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

ES6


Слайд 16

ES2015


Слайд 17

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


Слайд 18


Слайд 19

⌘+c


Слайд 20

⌘+c ⌘+v


Слайд 21

Babel now!


Слайд 22

classes


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

<build>


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

testing


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

eslint


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

csslint


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

How?


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

<serve>


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

RESTful API’s


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

RESTful API’s


Слайд 80

RESTful API’s JavaScript


Слайд 81

Isomorphic!


Слайд 82

Unimorphic!


Слайд 83

Isomorual!


Слайд 84

Universal!


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

Don’t


Слайд 90

Do


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

Eac


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

Questions?


Слайд 121

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


Слайд 122


×

HTML:





Ссылка: