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•...
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 %><%...
components/nav.html<nav><a href="/home">Home</a><a href="/articles">Articles</a></nav><script src="/static/js/all.js"></sc...
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="<...
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"...
JavaScript samenvoegennode server ⏎
Toekomst: RequireJS
Toekomst: RequireJSConditionerJS
Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief• SASS + Watcher• JavaScript samenvoegen• ...
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
Node.js & Front-End Bootstrap
Node.js & Front-End Bootstrap
Node.js & Front-End Bootstrap
Node.js & Front-End Bootstrap
Node.js & Front-End Bootstrap
Upcoming SlideShare
Loading in...5
×

Node.js & Front-End Bootstrap

2,194

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,194
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • OCT 2012
  • Transcript of "Node.js & Front-End Bootstrap"

    1. 1. Node.js
    2. 2. V8 buiten de browser
    3. 3. Async I/O
    4. 4. CPU Ops = SchnellHD Ops = Langsam
    5. 5. Async I/O1 // any language2 mkdir(mydir);3 echo done!;1 // node.js2 fs.mkdir(mydir, function() {3 console.log(done!);4 });
    6. 6. S[nel|chaalbaar]
    7. 7. JavaScript?
    8. 8. JavaScript?...is event-driven....heeft nog geen I/O API....heeft een community die mee wil veranderen.
    9. 9. 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
    10. 10. Front-End library?
    11. 11. Nu 3 soorten:1. Geen2. Apache SSI3. PHP frameworks
    12. 12. En toen was het 2013
    13. 13. YUICompressor
    14. 14. YUI Compressor
    15. 15. node-cssminhttp://github.com/jbleuzen/node-cssmin
    16. 16. UglifyJS 2http://github.com/mishoo/UglifyJS2
    17. 17. Apache Ant
    18. 18. Front-End Bootstraphttp://github.com/branneman/frontend-bootstrap
    19. 19. Features• Easy setup
    20. 20. 1. Installeer Node.js & Ruby2. Download .zip3. CLI:npm install ⏎node server ⏎4. Browser:http://localhost:1337/
    21. 21. Bonus: IDE integratienode server ⏎
    22. 22. Features• Easy setup• HTML templates (includes etc.)
    23. 23. homepage.html<% layout(layout) -%><div class="grid-full"><%- include components/nav %><%- include components/articles %><%- include components/footer %></div>
    24. 24. components/nav.html<nav><a href="/home">Home</a><a href="/articles">Articles</a></nav><script src="/static/js/all.js"></script>
    25. 25. Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief
    26. 26. components/nav.html<nav><a href="<%=baseUrl%>home">Home</a><a href="<%=baseUrl%>articles">Articles</a></nav><script src="<%=baseUrl%>static/js/all.js">
    27. 27. Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief• SASS + Watcher
    28. 28. Automagische SASS watchernode server ⏎
    29. 29. Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief• SASS + Watcher• JavaScript samenvoegen
    30. 30. all.json{"files": ["has-js.js","config.js","util.js","components/toggle.js","components/tabs.js","components/carrousel.js","init.js"]}
    31. 31. JavaScript samenvoegennode server ⏎
    32. 32. Toekomst: RequireJS
    33. 33. Toekomst: RequireJSConditionerJS
    34. 34. Features• Easy setup• HTML templates (includes etc.)• HTML paden: alles relatief• SASS + Watcher• JavaScript samenvoegen• Grunt
    35. 35. Grunt• JSHint• Jasmine• UglifyJS 2• EJS includes vervangen• Deploy naar mira-staging
    36. 36. Deploy naar mira-staginggrunt deploy ⏎
    37. 37. Front-End Bootstraphttp://github.com/branneman/frontend-bootstrap

    ×