• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Node.js & Front-End Bootstrap
 

Node.js & Front-End Bootstrap

on

  • 2,215 views

 

Statistics

Views

Total Views
2,215
Views on SlideShare
2,215
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • OCT 2012

Node.js & Front-End Bootstrap Node.js & Front-End Bootstrap Presentation Transcript

  • Node.js
  • V8 buiten de browser
  • Async I/O
  • CPU Ops = SchnellHD Ops = Langsam
  • Async I/O1 // any language2 mkdir(mydir);3 echo done!;1 // node.js2 fs.mkdir(mydir, function() {3 console.log(done!);4 });
  • S[nel|chaalbaar]
  • JavaScript?
  • JavaScript?...is event-driven....heeft nog geen I/O API....heeft een community die mee wil veranderen.
  • Populair!Talen:• Erlang• HaskellFrameworks:• Vert.x — Polygot (JS/Coffee/Python/Ruby/Java)• Tornado & Twisted voor Python• EventMachine voor Ruby• Perl Object Environment voor Perl• libevent voor C
  • Front-End library?
  • Nu 3 soorten:1. Geen2. Apache SSI3. PHP frameworks
  • En toen was het 2013
  • YUICompressor
  • YUI Compressor
  • node-cssminhttp://github.com/jbleuzen/node-cssmin
  • UglifyJS 2http://github.com/mishoo/UglifyJS2
  • Apache Ant
  • Front-End Bootstraphttp://github.com/branneman/frontend-bootstrap
  • Features• Easy setup
  • 1. Installeer Node.js & Ruby2. Download .zip3. CLI:npm install ⏎node server ⏎4. Browser:http://localhost:1337/
  • Bonus: IDE integratienode server ⏎
  • Features• Easy setup• HTML templates (includes etc.)
  • homepage.html<% layout(layout) -%><div class="grid-full"><%- include components/nav %><%- include components/articles %><%- include components/footer %></div>
  • components/nav.html<nav><a href="/home">Home</a><a href="/articles">Articles</a></nav><script src="/static/js/all.js"></script>
  • Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief
  • components/nav.html<nav><a href="<%=baseUrl%>home">Home</a><a href="<%=baseUrl%>articles">Articles</a></nav><script src="<%=baseUrl%>static/js/all.js">
  • Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief• SASS + Watcher
  • Automagische SASS watchernode server ⏎
  • Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief• SASS + Watcher• JavaScript samenvoegen
  • all.json{"files": ["has-js.js","config.js","util.js","components/toggle.js","components/tabs.js","components/carrousel.js","init.js"]}
  • JavaScript samenvoegennode server ⏎
  • Toekomst: RequireJS
  • Toekomst: RequireJSConditionerJS
  • Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief• SASS + Watcher• JavaScript samenvoegen• Grunt
  • Grunt• JSHint• Jasmine• UglifyJS 2• EJS includes vervangen• Deploy naar mira-staging
  • Deploy naar mira-staginggrunt deploy ⏎
  • Front-End Bootstraphttp://github.com/branneman/frontend-bootstrap