Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bootstrap, Node and some magic Fairy dust

Bootstrap, Node and some magic Fairy dust

Talk held at the Software Society Dundee on 7th November 2013 about getting started with Bootstrap, Node.js and Dust.js.

Paul Sutherland

November 07, 2013
Tweet

More Decks by Paul Sutherland

Other Decks in Technology

Transcript

  1. About me Paul Sutherland Construction Surveyor at Black & Veatch

    Member of The Software Society since December 2011
  2. Commands in this presentation are based upon Ubuntu 12.04 LTS

    for server and desktop. Please change to suit your Linux Distribution. The Server I use is a Development box with BHost
  3. What is Bootstrap? • A front-end web framework/tool-kit that gives

    you a foundation for building slick websites and web apps. • It originated from Twitter and was created by Mark Otto and Jacob Thornton. • The guys released it as open source on GitHub in August 2011. Its popularity soared and is now the most popular project on GitHub. • 4.9k Watching, 60k Stars and 21k forks
  4. What is included? • Grid System for Responsive design (Version

    3 is designed mobile first) • Typography (H1, H2 …. Paragraphs, Abbreviations, Addresses, Block quotes Lists) • Code • Tables • Forms • Buttons • Images • Responsive Utilities • Glyphicons (Version 3 uses @font- face) • Dropdowns • Button Groups • Input Groups • Navs • Navbar • Breadcrumbs • Pagination • Labels • Badges • Jumbotron • Page Header • Thumbnails • Alerts • Progress Bars • Media Object • List Group • Panels • Wells • Modal • Drop-downs • Scrollspy • Tooltip • Popover • Alert • Button • Collapse • Carousel • Affix
  5. What is Node.js • Node.js is a server-side JavaScript framework

    that is used to build fast, scalable network applications. It uses an event-driven non-blocking I/O model. • The framework is built on top of Google's V8 JavaScript Engine, which powers their Google Chrome web browser
  6. Google's V8 Engine • The V8 engine compiles JavaScript straight

    to native machine code, with further optimisation at runtime, making it super fast. • Google released V8 as open source. • Highly recommend the 5min V8 video by lead developer Lars Bak: http://www.youtube.com/watch?v=hWhMKalEicY
  7. Cost of I/O • L1-Cache • L2-Cache • RAM •

    Disk • Network 3 Cycles 14 Cycles 250 Cycles 41,000,000 Cycles 240,000,000 Cycles
  8. Example of Event Driven Programming I/O Blocking Example result =

    query('SELECT * FROM users WHERE id = 1'); perform_trick_with(result); Non Blocking I/O Event Driven Example do_trick = function(result) { perform_trick_with(result); } query('SELECT * FROM users WHERE id = 1', do_trick);
  9. Node's USP • Node runs on a single thread. •

    It is uses an event system. Image Source: Jeff Kunkle Presentation (Highly recommend his Node.js Explained video: www.youtube.com/watch?v=L0pjVcIsU6A)
  10. Installing Node • Best install the latest release from source.

    Package managers tend to have older releases. wget http://nodejs.org/dist/v0.10.21/node-v0.10.21.tar.gz tar zxf node-v0.10.21.tar.gz cd node-v0.10.21 ./configure make sudo make install Note: on distributions with Python3 as default you need to run: python2 ./configure.
  11. Bootstrap • Create your project folder mkdir retirement_project cd retirement_project

    git init • Download the Bootstrap source wget https://github.com/twbs/bootstrap/archive/master.zip unzip bootstrap mv bootstrap-master bootstrap git remote add thelab [email protected]:web- design/bootstrap.git git push -u thelab master
  12. Bootstrap - Documentation • You can use the Documentation Offline

    by installing Jekyll, which is a static site generator. It takes a template directory and using Textile or Markdown it outputs a static website sudo apt-get install ruby1.9.1-dev sudo gem install jekyll jekyll serve note: For Arch use RVM
  13. Node.js and the Express.js Web application framework • For the

    back end use Node.js and Express.js • Firstly, Install Express globally in Node sudo npm install -g express • Secondly, Install express in our project express npm install • Test your webserver by launching it node app.js
  14. Create a .gitignore file and then commit your changes. #

    Ignore docs files _gh_pages _site .ruby-version # Numerous always-ignore extensions *.dif *.err *.orig *.log *.rej *.swo *.swp *.zip *.vi *~ # OS or Editor folders .DS_Store ._* Thumbs.db .cache .project .settings .tmproj *.esproj nbproject *.sublime-project *.sublime-workspace .idea # Komodo *.komodoproject .komodotools # grunt-html-validation validation-status.json validation-report.json # Folders to ignore node_modules touch .gitignore nano .gitignore {add text opposite} git commit -a -m “Installed Express” git push thelab {or origin}
  15. Grunt.js • Grunt is a task runner • It can

    run common task such as compiling JavaScript, minimising CSS, compiling less and sass and much more. • We tweak the standard Grunt.js file in out bootstrap directory to make sure it outputs the minified JavaScript and css files into our Express Public folder
  16. Grunt.js • Grunt is a task runner which can run

    common tasks such as compiling JavaScript, minifying CSS, compiling less and sass and much more. • Firstly, Install it globally and then install it in our bootstrap folder: sudo node -g grunt npm install • Secondly, we tweak the standard Grunt.js file in our bootstrap directory to make sure it outputs the minified JavaScript and css files into our Express public folder • Replace all instances of: dist/js with ../public/js in Grunt.js
  17. Why do we need a templating engine • Single page

    apps probably don't require any breakdown of the page template. • When we start to increase the number of pages in the application, we need to modularise the interface to avoid duplicating code in multiple files eg: separate out headers, footers, content, portlets etc in to separate files and pull together with a templating engine. • We also want to be able to output dynamic content.
  18. Why do we need a templating engine • Single page

    apps probably don't require any breakdown of the page template. • When we start to increase the number of pages in the application, we need to modularise the interface to avoid duplicating code in multiple files eg: separate out headers, footers, content, portlets etc in to separate files and pull together with a templating engine. • We also want to be able to output dynamic content.
  19. There are a few to choose from asyncEJS — Asynchronous

    implementation of embedded JavaScript bake — Templating engine for static files. Supports ejs templates. bind-js — a simple templating engine for node.js that smiles back. Blade — HTML Template Compiler, inspired by Jade & Haml. Express compliant bliss — Template engine inspired by .NET Razor and Play! Scala Templates. blue — A streamed template engine. Support for asynchronous loading of partials CoffeeKup — Markup as CoffeeScript. Live demo and html2coffeekup. CoffeeMugg — Markup as CoffeeScript. A branch of CoffeeKup, supports closures, requires no compilation, extensible via view-helper libraries, like ActionView. combyne.js — A template engine that hopefully works the way you'd expect. Diet Dot — The fastest + concise JavaScript template engine for nodejs and the browser, made even more so and sans mustache-style syntax doT.js — Concise and super fast JavaScript templates with customizable delimiters, streaming and partials support DryKup — CoffeeKup-compatible mark-up for CoffeeScript. Supports closures and requires no compilation. dust — Async, streaming & composable templates for the browser and node Eco — Embedded CoffeeScript templates ECT — High performance template engine with embedded CoffeeScript syntax (see demo) egs - Highly performant, fully asynchronous text templating engine built around GorillaScript. Express compliant ejs — Light-weight Embedded JavaScript implementation. Express compliant
  20. Quite a few to choose from fest — Fast and

    safe template, xml syntax fgen — A file generator library to be used to generate project structures, file templates and/or snippets. Templates are based on mustache. gaikan - HTML template engine for Node and Express. genapp - A customizable generator application using fgen. haml-js — Server side html generation using JavaScript. Parses haml templates and renders html. haml.js — Faster / more compliant implementation of Haml. Express support handlebars.js — The mustache-inspired templating library behind Ember.js Jade — Haml-like template engine, fantastic error reporting, easier to read, higher performance. Express compliant jazz — A readable template language for node. JinJS — A port of Jinja, a Django Template-like templating language to JavaScript Jinsoku - High performance JavaScript template engine inspired by Jade's power and doT's speed. jm — Another Builder/Markaby/Erectory clone in JavaScript. jqtpl — A port of the new jQuery template engine. Express compliant jsdom — pure js implementation of the dom level 1 with some browser augmentation. Level 2 and 3 are being considered. jshtml — Clean HTML, full JavaScript template engine. Inspired by the razor view engine used in asp.net mvc. JSON Template — Minimal but powerful template language with multiple implementations. This is the CommonJS version, tested on Node Kiwi — Simple yet powerful template engine based on jQuery Templates syntax, totally asynchronous, and built from the ground up with performance and modularity in mind. Express 3.x compliant. Kruntch.js — A simple, lightweight, efficient and non-invasive pure-JavaScript templating engine perfect for powering
  21. More than a few to choose from less.js — official

    port of Less to JavaScript/node. Liquor — A templating engine minus the code. Lite(LiteXML) — A cross platform template engine base on xml/html and JavaScript expression ltxb — Less-Than XML builder templates minstache -- tiny mustache compiler producing stand-alone functions minimal.js — a fast HTML+JSON template engine (both browser and Node.js compatible) MinnaHtml.js - An async aware object based HTML template library Mu (Mustache) — A Mustache engine that compiles templates into very fast rendering functions. Also streams the node-dom — JavaScript fast W3C DOM generation. node-jst — A pretty high performance template engine implemented with JavaScript. Express compliant node-pages — A simple template engine. Cacheable and Trackable. node-properties — Simple property reader, externalise your configuration through JSON Node-T — A fast django-like templating engine for node.js node-template — Fast and light cached templates. node-tmpl — basic templating system in node.js based on short tag node.magic_dom — A DSL for building HTML in node.js, similar to Python's Stan nodejs-meta-templates — like php mixed with html, processed twice, 1st static data, 2nd dynamic data. normal-template — Normal templates are simple, yet powerful. They are safe, usable in non XML/HTML contexts and portable to any programming language. nTPL — Fast & Native extendible template system nun — Totally asynchronous non-blocking template engine for node.js
  22. Maybe too much to choose from nunjucks - A jinja2-inspired

    template system, more up-to-date than jinjs Parrot — A lightning fast and lightweight templating engine for Node.js (Just 33 LOC!) Pencil — Custom tags/components for Jade. Extend, mixin and inherit. Plates — Light-weight, logic-less, DSL-free, templates for all JavaScript environments! PURE — Unobtrusive Rendering Engine. The HTML view and the JS logic remain strictly separated. Works with jsdom. QEJS — Asyncronous Embedded JavaScript Templates with Q promises raptor — Extensible and optimized HTML templating language that is part of RaptorJS. Works in the browser and on the server. Razor Leaf — A template engine with a minimal, concise, and indentation-based syntax (akin to Jade’s). scraps — A Space based HTML template language. shift.js — Standard interface to the Node.js template engines. simpleT — Simple Template Engine for embedded JavaScript with automatic caching and client-side support stencil — Renders asynchronous templates shared by server and browser Swig — Fast and powerful Django-style templates for node.js. Express compliant. Teddy — An easy-to-read, HTML-based, mostly logic-less DOM templating engine with support for both server-side and client-side templating based on the W3C standard DOMParser and XMLSerializer. Templ8 — A fast, lightweight, yet powerful & feature rich client/ server template engine based on Django style syntax template.node.js — A light, fast, cached template module for node. thunder — A lighting fast template parser for node.js. Express compliant tmpl-node — a feature-rich template module for node.js
  23. tob — Template Observer, allows self-reloading templates with your template

    engine TOFFEE — templates with the elegance of CoffeeScript, by the makers of OkCupid. (Compatible with Express 2, 3, and the browser). tpl — a general purpose template cli TSN — A Templating System for Node.JS. TwigJS — A port of PHP template engine (www.twig-project.org) to JavaScript weld — unobtrusive. portable. ANTI-TEMPLATING. Weld binds data to mark-up, and can generate mark-up based on your data. wieldyjs — Template-agnostic mark-up language that compiles to HTML. Grunt task available as well grunt-wieldyjs whiskers — single-file, feature-sparse templating for node, express, and the browser xmlb — XML builder templates xmlbuilder-js — An xml builder for node.js similar to java-xmlbuilder. xmlbuilder.js — An xml builder in JavaScript inspired by Ruby's Builder, Markaby, and Erector. rendering process. Arrrgghhhh
  24. What does Dust.js ofer + Logic-less templates do a great

    job of forcing you to separate presentation from logic. + Clean syntax leads to templates that are easy to build, read, and maintain. + Compiled rather than interpreted templates. + Better support for paths than mustache (i.e. reaching deep into a context object). + Better support for global helpers than mustache. + Inline parameters. + Blocks & inline partials. + Overriding contexts. + Support for asynchronous rendering and streaming. + Composable templates. - Requires server-side JavaScript to render on the server. - Maintainer of github repo is not responsive. Source: http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
  25. Why Dust.js “Based on our evaluation and how we prioritized

    the requirements, dust.js came out as the winner. It was the option that ofered the most features and flexibility while keeping the view code DRY, clean, and fast.” Source: http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
  26. Get Started I have created a branch of my latest

    project which is a starter template with Bootstrap, Node, Express and Dust wired together git clone [email protected]:paulsutherland/through-the- wardrobe.git cd through-the-wardrobe npm install node app.js visit http://localhost:8080/ Source: http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
  27. CSS Preprocessor // LESS @color: #4D926F; #header { color: @color;

    } h2 { color: @color; } /* Compiled CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } Variables
  28. CSS Preprocessor // LESS .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius;

    -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* Compiled CSS */ #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } Mixins
  29. CSS Preprocessor // LESS @base-color: #111; @the-border: 1px; @base-color: #111;

    @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); } /* Compiled CSS */ #header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; } Functions
  30. Using Less in your project 1. Install grunt­cli globally with:

    npm install ­g grunt­cli 2. Navigate to the /bootstrap directory, then run npm install npm will look at package.json and automatically install the necessary local dependencies listed there. 3. Edit the bootstrap.less file and add to the bottom of the file: // Custom less files @import "custom.less"; 4. Add a custom.less file to the less folder touch less/custom.less 5. Navigate to the Bootstrap folder in your terminal and run: grunt watch
  31. ?