General Assembly Workshop: Advanced JavaScript
-
Upload
spike-brehm -
Category
Technology
-
view
4.667 -
download
5
Transcript of General Assembly Workshop: Advanced JavaScript
![Page 1: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/1.jpg)
Master Class:Isomorphic JavaScript
Spike Brehm@spikebrehm
![Page 2: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/2.jpg)
irst, introductions.
![Page 3: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/3.jpg)
Spike BrehmSoftware Engineer
Airbnb 2.5 years
JavaScript & Ruby
No CS background;self-taught hacker
![Page 4: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/4.jpg)
My team
![Page 5: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/5.jpg)
My team
![Page 6: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/6.jpg)
My team
![Page 7: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/7.jpg)
Introduce yourselves.
![Page 8: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/8.jpg)
you are.Wo
you work.Were
you’re here.Wy
![Page 9: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/9.jpg)
Agenda
![Page 10: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/10.jpg)
...TF is Isomorphic JavaScript?Wat
...is it relevant to web developers?Wy
...can I build isomorphic apps?How
![Page 11: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/11.jpg)
WTF is Isomorphic JavaScript?
![Page 12: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/12.jpg)
JavaScript code that can run on both the client and server.
![Page 13: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/13.jpg)
A brief note on “isomorphic”.
![Page 14: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/14.jpg)
“monomorphic”“heteromorphic”“homomorphic”“multi-platform”
You’re using it wrong!
![Page 15: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/15.jpg)
Example, plz.
![Page 16: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/16.jpg)
Example: Underscore.js
var posts = [{ id: 1, title: 'JavaScript is cool'}, { id: 2, title: 'The Web is the platform'}]; _.pluck(posts, 'title');// ['JavaScript is cool', 'The Web is the platform']
![Page 17: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/17.jpg)
Ye olde days:fat-serer, thin-client.
![Page 18: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/18.jpg)
ClientJavaScript
SererRubyPythonJavaPHP
Persistence
View layer
Application logic
Routing
DOM manipulation
Form validation
Animations
![Page 19: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/19.jpg)
Circa 2011:thin-serer, fat-client.
![Page 20: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/20.jpg)
Routing
View layer
SererRubyPythonJavaPHP
Persistence
ClientJavaScript
Application logic
DOM manipulation
Form validation
Animations
![Page 21: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/21.jpg)
Teh footure:shared, fat-serer, fat-client.
![Page 22: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/22.jpg)
SererRubyPythonJavaPHP
Persistence
ClientJavaScript
Routing
View layer
Application logic
DOM manipulation
Form validation
SharedJavaScript
Animations
![Page 23: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/23.jpg)
Isomorphic JavaScript can be
orshimmed per environment .
environment-agnostic
![Page 24: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/24.jpg)
Does not depend on browser-specific properties (window) or server-specific properties (process.env, req.cookies).
Environment-agnostic
![Page 25: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/25.jpg)
Example: Handlebars.js
var template = '<ul>' \ '{{#each posts}}' \ ' <li>{{title}}</li>' \ '{{/each}}' \ '</ul>'; var templateFn = Handlebars.compile(template) , html = templateFn({posts: posts}); // <ul>// <li>JavaScript is cool</li>// <li>The Web is the platform</li>// </ul>
![Page 26: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/26.jpg)
Provides shims for accessing environment-specific properties so module can expose a single API.
window.location.pathnamevs.req.path
Shimmed per environment
![Page 27: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/27.jpg)
Example: Superagent
superagent .post('/api/posts.json') .send({ title: 'Moar JavaScript', body: '...' }) .set('X-Api-KEY', '123456abcdef') .end(function(response) { if (response.status === 200) { console.log("Success!"); } else { console.error("Error", response.body.error); } });
![Page 28: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/28.jpg)
Isomorphic use cases.
![Page 29: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/29.jpg)
•Templating•Routing• I18n•Date & currency formatting•Model validation•API interaction• ...?
Isomorphic use cases.
![Page 30: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/30.jpg)
Most of your favorite libraries can be used isomorphically.
![Page 31: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/31.jpg)
•Underscore.js•Backbone.js•Handlebars.js• jQuery•Moment•React.js•Polyglot.js (I18n)
![Page 32: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/32.jpg)
Wy go to the trouble?
![Page 33: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/33.jpg)
Initial pageload speed.Performance
Crawlable single-page apps.SEO
Reduce code duplication.Maintainability
![Page 34: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/34.jpg)
Isomorphic JavaScript is a spectrum.
![Page 35: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/35.jpg)
Entire view layer and app
logic shared
Small bits of view layer or logic shared
![Page 36: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/36.jpg)
Many abstractions
Few abstractions
![Page 37: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/37.jpg)
ComplexSimple
![Page 38: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/38.jpg)
View layer shared
Entire app runtime synced between client
& server
![Page 39: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/39.jpg)
Isomorphic frameworks.
![Page 40: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/40.jpg)
MojitoOne of the first isomorphic frameworks.• Released by Yahoo! a few years ago.• Full-stack framework; YUI components.• Super-advanced deferred rendering.• Never caught on.
![Page 41: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/41.jpg)
MeteorAwesome framework for building real-time apps.• Full web application framework; has own
build system and package manager.• Realtime from the ground up.• Requires MongoDB (or adapter).• No server-side rendering (yet).• All-star dev team.
![Page 42: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/42.jpg)
RendrLibrary for isomorphic Backbone.js + Handlebars.js.
• Render your Backbone apps on the server.• Open-sourced by Airbnb.• Less opinionated than the big frameworks.• Came out of m.airbnb.com.
![Page 43: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/43.jpg)
Building and bundling.
![Page 44: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/44.jpg)
Package up CommonJS modules for the browser.
Browserif
Use ‘require()’ in the browser, the same way you would on the server.
Bundles a module and all its dependencies.
![Page 45: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/45.jpg)
Browserif
demo
![Page 46: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/46.jpg)
Task runner for automating build and development workflow.
Grunt
![Page 47: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/47.jpg)
•Compile Handlebars templates•Run Browserify to package up your shared app files
•Recompile files and restart Node server on every change
Grunt
![Page 48: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/48.jpg)
Any questions thus far?
![Page 49: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/49.jpg)
Hack time.
![Page 50: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/50.jpg)
Combines a few modules together for MVP of isomorphic app.
Sample Node.js app
Express.js blog platformBasic web server with RESTful API.
![Page 51: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/51.jpg)
Templating.Handlebars.js
DirectorRouting HTTP and HTML5.
HTTP requests to API.Superagent
![Page 52: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/52.jpg)
Tour of the app.
![Page 53: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/53.jpg)
Setting up locally.
![Page 54: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/54.jpg)
git clone [email protected]:spikebrehm/isomorphic-tutorial.git
Clone the sample app
github.com/spikebrehm/isomorphic-tutorial
![Page 55: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/55.jpg)
Ensure Node >= 0.8.x$ node --versionv0.10.21
github.com/spikebrehm/isomorphic-tutorial
Have to install?$ brew install nodeorhttp://nodejs.org
![Page 56: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/56.jpg)
$ npm install grunt-cli -g
Install `grunt-cli`
github.com/spikebrehm/isomorphic-tutorial
![Page 57: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/57.jpg)
$ cd isomorphic-tutorial$ npm install
Run `npm install`
github.com/spikebrehm/isomorphic-tutorial
![Page 58: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/58.jpg)
$ grunt server
Run the serer!
github.com/spikebrehm/isomorphic-tutorial
View `localhost:3030` in browser
![Page 59: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/59.jpg)
Let’s add a feature.
![Page 60: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/60.jpg)
Date formattingBefore:After:
Momentmoment('2013-11-04T17:23:01.329Z').format('LLLL');// "Monday, November 4 2013 9:23 AM"
![Page 61: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/61.jpg)
Add Moment using NPM$ npm install moment --save
![Page 62: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/62.jpg)
Create `formatDate` Handlebars helperPosted at {{created_at}}
Posted at {{formatDate created_at}}
function formatDate(dateStr) { return moment(dateStr).format('LLLL');}
![Page 63: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/63.jpg)
That wasn’t so hard.Let’s do another.
![Page 64: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/64.jpg)
Create a new postNew page at /posts/new
Form for post data
On submit, POST to the API.
Use JavaScript to intercept thesubmit event and POST via XHR.
![Page 65: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/65.jpg)
Moar features!
![Page 66: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/66.jpg)
Markdown formattingUsing Showdown.js.
Swap out templatingJade, EJS, Underscore, React.js.
Make it prettyBootstrap that shit. Responsive?
Add UI librarBackbone.js, Angular.js.
![Page 67: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/67.jpg)
Towards an isomorphic future.
![Page 68: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/68.jpg)
JavaScript is the lingua franca of the Web.
The Web is the platform;JavaScript provides the runtime.
![Page 69: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/69.jpg)
More reusable solutions;more small modules.
It will be rare to see a web app using no server-side JavaScript.
![Page 70: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/70.jpg)
The revolution will come in the build systems.
Static analysis, conditional builds, source transforms.
![Page 71: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/71.jpg)
Questions?
![Page 72: General Assembly Workshop: Advanced JavaScript](https://reader030.fdocuments.us/reader030/viewer/2022013114/554f97b7b4c90586258b463f/html5/thumbnails/72.jpg)
@AirbnbNerds@spikebrehm
Thanks!