Isomorphic JavaScript: #DevBeat Master Class
-
Upload
spike-brehm -
Category
Technology
-
view
12.664 -
download
1
Transcript of Isomorphic JavaScript: #DevBeat Master Class
Master Class:Isomorphic JavaScript
Spike Brehm@spikebrehm
New iOS, Android apps launched today
</marketing>
Agenda
...TF is Isomorphic JavaScript?Wat
...is it relevant to web developers?Wy
...can I build isomorphic apps?How
WTF is Isomorphic JavaScript?
JavaScript code that can run on both the client and server.
A brief note on “isomorphic”.
“monomorphic”“heteromorphic”“homomorphic”“multi-platform”
You’re using it wrong!
Example, plz.
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']
Ye olde days:fat-serer, thin-client.
ClientJavaScript
SererRubyPythonJavaPHP
Persistence
View layer
Application logic
Routing
DOM manipulation
Form validation
Animations
Circa 2011:thin-serer, fat-client.
Routing
View layer
SererRubyPythonJavaPHP
Persistence
ClientJavaScript
Application logic
DOM manipulation
Form validation
Animations
Teh footure:shared, fat-serer, fat-client.
SererRubyPythonJavaPHP
Persistence
ClientJavaScript
Routing
View layer
Application logic
DOM manipulation
Form validation
SharedJavaScript
Animations
Isomorphic JavaScript can be
orshimmed per environment .
environment-agnostic
Does not depend on browser-specific properties (window) or server-specific properties (process.env, req.cookies).
Environment-agnostic
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>
Provides shims for accessing environment-specific properties so module can expose a single API.
window.location.pathnamevs.req.path
Shimmed per environment
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); } });
Isomorphic use cases.
• Templating• Routing• I18n• Date & currency formatting• Model validation• API interaction• ...?
Isomorphic use cases.
Most of your favorite libraries can be used isomorphically.
• Underscore.js• Backbone.js• Handlebars.js• jQuery• Moment• React.js• Polyglot.js (I18n)
Isomorphic JavaScript is a spectrum.
Entire view layer and app
logic shared
Small bits of view layer or logic shared
Many abstractions
Few abstractions
ComplexSimple
View layer shared
Entire app runtime synced between client
& server
Wy go to the trouble?
Initial pageload speed.Performance
Crawlable single-page apps.SEO
Reduce code duplication.Maintainability
Building and bundling.
Package up CommonJS modules for the browser.
Browserif
Use ‘require()’ in the browser, the same way you would on the server.
// app/template_renderer.js var handlebars = require('handlebars'); module.exports = function(templatePath, data) { var templateFn = require('./views/' + templatePath) , html = templateFn(data); return html;};
Bundles a module and all its dependencies.
Browserif
Task runner for automating build and development workflow.
Grunt
•Compile Handlebars templates•Run Browserify to package up your shared app files
•Recompile files and restart Node server on every change
Grunt
Any questions thus far?
Hack time.
Combines a few modules together for MVP of isomorphic app.
Sample Node.js app
Express.js blog platformBasic web server with RESTful API.
Templating.Handlebars.js
DirectorRouting HTTP and HTML5.
HTTP requests to API.Superagent
Tour of the app.
Setting up locally.
git clone [email protected]:spikebrehm/isomorphic-tutorial.git
Clone the sample app
github.com/spikebrehm/isomorphic-tutorial
Ensure Node >= 0.8.x$ node --versionv0.10.21
github.com/spikebrehm/isomorphic-tutorial
Have to install?$ brew install nodeorhttp://nodejs.org
$ npm install grunt-cli -g
Install `grunt-cli`
github.com/spikebrehm/isomorphic-tutorial
$ cd isomorphic-tutorial$ npm install
Run `npm install`
github.com/spikebrehm/isomorphic-tutorial
$ grunt server
Run the serer!
github.com/spikebrehm/isomorphic-tutorial
View `localhost:3030` in browser
Let’s add a feature.
Date formattingBefore:After:
Momentmoment('2013-11-04T17:23:01.329Z').format('LLLL');// "Monday, November 4 2013 9:23 AM"
Add Moment using NPM$ npm install moment --save
Create `formatDate` Handlebars helperPosted at {{created_at}}
Posted at {{formatDate created_at}}
function formatDate(dateStr) { return moment(dateStr).format('LLLL');}
Questions?
@AirbnbNerds@spikebrehm
Thanks!