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

15-437 Client Side Frameworks

ThierrySans
November 17, 2013

15-437 Client Side Frameworks

ThierrySans

November 17, 2013
Tweet

More Decks by ThierrySans

Other Decks in Education

Transcript

  1. We are going to talk about today Responsive Design Twitter

    Bootstrap Dynamic CSS Less Dynamic Javascript Modules Require.js
  2. Responsive Design ➡ when the web application UI automatically adapts

    to the display of the device • phone • phablet • tablet • computer • tv
  3. Twitter Bootstrap CSS and Javascript Framework ๏ Writing CSS is

    hard ๏ Writing CSS for different devices is even harder ✓ A reactive framework has pre-defined UI elements that are reactive by design (menu, tables, buttons, dialog and so on) http://getbootstrap.com/
  4. Dimensions App Testing Responsive Designs ➡ Test and visualize how

    the web application is rendered on a different device http://www.dimensionsapp.com/
  5. Grid System in Bootstrap <div class="row">! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>!

    <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! </div>! <div class="row">! <div class="col-md-8">.col-md-8</div>! <div class="col-md-4">.col-md-4</div>! </div>! <div class="row">! <div class="col-md-4">.col-md-4</div>! <div class="col-md-4">.col-md-4</div>! <div class="col-md-4">.col-md-4</div>! </div>! <div class="row">! <div class="col-md-6">.col-md-6</div>! <div class="col-md-6">.col-md-6</div>! </div>! example from http://getbootstrap.com/css/#grid
  6. <div class="navbar navbar-default navbar-fixed-top" role="navigation" id=“my-nav-bar">! <div class="container">! <div class="navbar-header">!

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">! …! </button>! <a class="navbar-brand" href="#">15-437 Spring'13</a>! </div>! <div class="navbar-collapse collapse">! <ul class="nav navbar-nav">! <li><a href="#description">Description</a></li>! ... ! <li class="dropdown">! <a href="#" class="dropdown-toggle" data-toggle=“dropdown"> ... <b class="caret"></b></a>! <ul class="dropdown-menu">! <li><a href="https://piazza.com/qatar.cmu/fall2013/15437/home">Piazza</a></li>! ... ! </ul>! </li>! </ul>! <ul class="nav navbar-nav navbar-right">! <li><a href="http://qatar.cmu.edu"><img src=“...” alt=“...” id="cmuq_logo"></a></li>! </ul>! </div><!--/.nav-collapse -->! </div>! </div> Navigation Bar in Bootstrap Home Menu items Dropdown menu Logo
  7. Contextual Navigation in Bootstrap Bootsrap Scroll Spy • Highlight the

    menu item currently viewed • Updated when scrolling <body data-spy="scroll" data-target="#my-nav-bar">! <!-- Fixed navbar -->! <div class="navbar navbar-default navbar-fixed-top"
 role="navigation" id="my-nav-bar">! ...
  8. Pros and Cons Rapid Development but sites tend to look

    the same (customization requires to do CSS) Responsive Design but design elements are embedded in the HTML (violation of the separation principle)
  9. Less Dynamic CSS ✓ Create CSS building block and reuse

    them ➡ Add programming features to CSS http://lesscss.org/
  10. Using Less and Bootstrap together Requires to use the source

    code of bootstrap (Less definitions) $ git clone https://github.com/twbs/bootstrap.git
 Feedback: ✓ Works well for simple things (such as grid and buttons) ๏ More complex components needs some Javascript tweaking
 (such as navigation bars)
  11. Require.js
 Dynamic module loader ✓ Load the javascript code that

    you need and when you need it ✓ Work with large scale Javascript code ➡ Structure the javascript code as modules and 
 avoid naming conflict between code from different modules http://requirejs.org/
  12. Define an AMD module define(['jquery'], function($){! "use strict";! ! var

    helper = function(){! console.log("welcome to module 1");! };! ! var say_hello = function(e){! helper();! e.html("hello from module 1!");! };! ! return{! hello: say_hello! };! ! }); use external modules export specific functions
  13. Use AMD modules var init = function(){! requirejs.config({! baseUrl: "",!

    paths: { ! ‘jquery': 'lib/jquery/jquery-1.10.2.min',! 'mod': 'js/modules'! },! shim: {! 'mod/module1' : ['jquery'],! 'mod/module2' : ['jquery']! }! });! ! require(['jquery','mod/module1','mod/module2'], function($,mod1,mod2) { ! mod2.hello($("#result"));! });! };! define module dependencies use modules paths to modules require.js configuration