What's New in Dojo 1.8

What's New in Dojo 1.8

A talk I gave at the London AJAX Users Group

70d87f519af14ca7338620b04afcb8e2?s=128

kitsonk

July 10, 2012
Tweet

Transcript

  1. PROJECT DATE BY 10 JULY 2012 KITSON P. KELLY DOJO

    1.8 WHAT IS COMING? Wednesday, 11 July 12
  2. Agenda Introduction Dojo Dijit DojoX Dojo 2.0 Wednesday, 11 July

    12
  3. Introduction Kitson P. Kelly Senior IT Manager by Day Dojo

    Committer by Night Dojo 1.8 The Final Step to 2.0 http://www.kitsonkelly.com @kitsonk Wednesday, 11 July 12
  4. A History Lesson... Dojo 1.7 AMD “Nano” Kernel - 3.8kb

    http://dojotoolkit.org http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/ Wednesday, 11 July 12
  5. dojo/promise More on This Later... http://livedocs.dojotoolkit.org/dojo/promise/ Wednesday, 11 July 12

  6. dojo/request Replaces/Unifies dojo.xhr, dojo.io.script and dojo.io.iframe Platform agnostic, browser or

    Node.js Extensible Handlers Request Registry Topics http://livedocs.dojotoolkit.org/dojo/request/ Wednesday, 11 July 12
  7. dojo/request http://livedocs.dojotoolkit.org/dojo/request/ require(["dojo/request"],  function(request){   request.get("some/data.json",  {     handleAs:

     "json"   }).then(function(response){     //  do  something  with  the  response   },  function(err){     //  handle  the  error   }); }); Wednesday, 11 July 12
  8. dojo/request http://livedocs.dojotoolkit.org/dojo/request/registry require(["dojo/request/registry",  "dojo/request/script"], function(request,  script){   //  Registers  anything

     that  ends  in  ".jsonp.js"  be  sent  to  the  script  provider   request.register(/\.jsonp\.js$/i,  script);   request.get("helloworld.jsonp.js",  {     jsonp:  "callback"   }).then(function(response){     //  Handle  response   });   request.get("helloworld.json",  {     handleAs:  "json"   }).then(function(response){     //  Handle  response   }); }); Wednesday, 11 July 12
  9. dojo/router Provides advanced Browser Hash Management Maps Hash Patterns to

    Callbacks Allows Parameterisation of the Browser Hash http://livedocs.dojotoolkit.org/dojo/router Wednesday, 11 July 12
  10. require(["dojo/router",  "dojo/dom",  "dojo/on",  "dojo/request",  "dojo/json",  "dojo/domReady!"], function(router,  dom,  on,  request,

     JSON){    router.register("/foo/bar",  function(evt){        evt.preventDefault();        request.get("helloworld.json",  {            handleAs:  "json"        }).then(function(response){            dom.byId("output").innerHTML  =  JSON.stringify(response);        });    });    router.startup();    on(dom.byId("changeHash"),  "click",  function(){        router.go("/foo/bar");    }); }); dojo/router http://livedocs.dojotoolkit.org/dojo/router Wednesday, 11 July 12
  11. dojo/node An AMD plugin that allows loading of seamless usage

    of traditional Node.js modules Allows you to follow AMD/Dojo coding style http://livedocs.dojotoolkit.org/dojo/node/ Wednesday, 11 July 12
  12. dojo/node http://livedocs.dojotoolkit.org/dojo/node/ //  Initial  Module  to  Load var  initModule  =

     "app/main"; //  Dojo  Configuration dojoConfig  =  {   async:  true,   baseUrl:  "lib/",   packages:  [{     name:  "dojo",     location:  "dojo"   },{     name:  "dijit",     location:  "dijit"   },{     name:  "dojox",     location:  "dojox"   },{     name:  "app",     location:  "app"   }],   deps:  [initModule] } //  Load  dojo/dojo require("./lib/dojo/dojo.js"); require([   "dojo/node!http" ],  function(http){   http.createServer(function  (req,  res){     res.writeHead(200,  {  "Content-­‐Type":  "text/plain"  });     res.end("Hello  World\n");   }).listen(1337,  '127.0.0.1');   console.log('Server  running  at  http://127.0.0.1:1337/'); }); >  node  bootstrap.js Server  running  at  http://127.0.0.1:1337/ bootstrap.js lib/app/main.js Wednesday, 11 July 12
  13. dojo/... dojo/parser - MIDs, Auto-Require, Declarative Require and Builder Transform

    dojo/touch - Touch Event Management dojo/dnd - Touch Enabled dojo/sniff - has() based browser detection dojo/Stateful - Standardised Accessors http://livedocs.dojotoolkit.org/releasenotes/1.8#dojo Wednesday, 11 July 12
  14. Dijit Selector Attachment for Tooltips and Menus Claro - CSS

    Gradients Performance Improvements http://livedocs.dojotoolkit.org/releasenotes/1.8#dijit Wednesday, 11 July 12
  15. dojox/mobile Significant Changes from 1.6 and 1.7 dojox/mobile/migrationAssist to Aid

    in Migration 26 New Mobile Widgets - StoreLists, SearchBox, Accordion, GridLayout, IconMenu, ScrollPane, Progress, Media, Badges, Rating, Dialogs, Pickers http://livedocs.dojotoolkit.org/dojox/mobile/ Wednesday, 11 July 12
  16. dojox/dgauges Rewrite of Gauges Designed to Efficient in Desktop and

    Mobile platforms Framework for Creating Custom Gauges http://livedocs.dojotoolkit.org/dojox/dguages/ Wednesday, 11 July 12
  17. <table>   <tbody>     <tr>       <td>

            <div  data-­‐dojo-­‐type="dojox/dguages/components/black/CircularLinearGuage"           data-­‐dojo-­‐props="useTooltop:  false,  value:  60,  background:  {  color:  'rgba(0,0,0,0)'  }"           style="width:  200px;  height:  200px;"></div>       </td>       <td>         <div  data-­‐dojo-­‐type="dojo/dguages/components/black/SemiCircularLinearGuage"           data-­‐dojo-­‐props="useTooltip:  false,  value:  20,  background:  {  color:  'rgba(0,0,0,0)'  }"           style="width:  250px;  height:  200px;"></div>       </td>       <td>         <div  data-­‐dojo-­‐type="dojo/dguages/components/black/HorizontalLinearGuage"           data-­‐dojo-­‐props="useTooltip:  false,  value:  20,  background:  {  color:  'rgba(0,0,0,0)'  }"           style="margin:  30px  0  0  0;  width:  400px;  height:  60px;"></div>       </td>     </tr>   </tbody> </table> dojox/dgauges http://livedocs.dojotoolkit.org/dojox/dguages/ Wednesday, 11 July 12
  18. dojox/calendar Time Based Event Display Widget Day, Week, Month Views

    Interactive to allow Editing Allows for Custom Event Renders http://livedocs.dojotoolkit.org/dojox/calendar/ Wednesday, 11 July 12
  19. dojox/calendar http://livedocs.dojotoolkit.org/dojox/calendar/ require(["dojox/calendar/Calendar",  "dojo/store/JsonRest",  "dojo/ready"],   function(Calendar,  JsonRest,  ready){  

    ready(function(){     var  store  =  new  JsonRest({       target:  "/calendar/"     });     var  calendar  =  new  Calendar({       dateInterval:  "day",       style:  "position:  relative;  width:  500px;  height:  500px;",       store:  store     },  "someId");   }); }); Wednesday, 11 July 12
  20. dojox/treemap Data Visualisation Widget Interactive, Resizable, Highly Configurable, Mobile Ready

    http://livedocs.dojotoolkit.org/dojox/treemap/ Wednesday, 11 July 12
  21. dojox/treemap http://livedocs.dojotoolkit.org/dojox/treemap/ require(["dojox/treemap/TreeMap",  "dojox/treemap/Keyboard",  "dojox/treemap/DrillDownUp",  "dojo/_base/declare",     "dojo/ready",  "dojo/dom-­‐construct",

     "dojo/dom-­‐attr",  "dojo/dom-­‐style"], function(TreeMap,  Keyboard,  DrillDownUp,  declare,  ready,  domConst,  attr,  style){   var  MyTreeMap  =  declare([TreeMap,  Keyboard,  DrillDownUp],  {     createRenderer:  function(item,  level,  kind){       if(kind  ==  "leaf"){         var  div  =  domConst.create("a");         attr.set(div,  "href",  "http://somelink/"  +  item.field);         style.set(div,  "overflow",  "hidden");         style.set(div,  "position",  "absolute");         return  div;       }else{         return  this.inherited(arguments);       }     }   });   var  atreemap  =  new  MyTreeMap({     labelAttr:  "Name",     selectionMode:  "multiple",     store:  store   },  "someId"); }); Wednesday, 11 July 12
  22. dojox/... dojox/mvc - Attribute Binding and Controller Improvements dojox/app -

    Clearer MVC structure, designed both for dojox/mobile and desktop applications dojox/gfx - Improvements around clipping, element lifecycle management and extensions around SVG and Canvas to fully leverage those APIs http://livedocs.dojotoolkit.org/releasenotes/1.8#dojox Wednesday, 11 July 12
  23. dgrid Complete Rewrite of the dojox/ DataGrid Highly Performant (32kb),

    Designed for Mobile and Desktop http://dgrid.io/ http://www.sitepen.com/blog/2012/06/11/dgrid-and-dojo-nano-build/ Wednesday, 11 July 12
  24. More goodness... API Viewer Reference Guide Updated Tutorials New Demos

    New Boilerplates Wednesday, 11 July 12
  25. And then... Dojo 2.0 Alpha – Late 2012, Beta –

    Early 2013, Release – Mid 2013 Concepts Introduced in 1.6, 1.7 and 1.8 to be the Foundation Dojo Foundation Packages Replaces DojoX Be Prepared Early for Migration: http://livedocs.dojotoolkit.org/releasenotes/migration-2.0 Dojo 1.9 to be Essentially Maintenance Release of 1.X Branch Wednesday, 11 July 12
  26. Finally Get Involved! Dojo Foundation eCLA - http://dojofoundation.org/about/claForm Get Started!

    http://download.dojolkit.org/release-1.8.0b1/ Get Informed! Reference Guide - http://livedocs.dojotoolkit.org/ API Docs - http://bill.dojotoolkit.org/api/ Release Notes - http://livedocs.dojotoolkit.org/releasenotes/1.8 Wednesday, 11 July 12