SlideShare a Scribd company logo
1 of 37
Rich Internet Applications
         with Dojo
         Tom Mahieu
         24 - 04 - 2010
About
•Tom Mahieu
 • http://www.mahieu.org
 • SW Engineer, Phd Computer Science
•PeopleWare
 • http://www.peopleware.be
 • Custom software development
   • Desktop/Web/Mobile apps, EAI
   • Technology: Java, .NET, Delphi
 • Business Intelligence
 • Training
                2
Outline
•Evolution in Web Applications
•Why dojo
•Showcase
•Future




              3
Web App Evolution




      4
Web App Evolution




      5
Web app evolution
Browser tier                Web tier



                                  Static
                                  HTML
                 Internet          files
    JavaScript
      HTML




                    6
Web App Evolution

Browser tier                  Web tier

                                     HTML

                                  PHP        ASP
                                  Servlets         Data tier
                   Internet                  JSP
                                    JSF
    JavaScript
                                         Spring
      HTML                              ...




                              7
Web App Evolution
Browser tier                Web tier
                                 HTML      PHP
                                    ASP
                                          Servlets
                                    JSP
                                            JSF
                                 Spring

                 Internet
                             Web Services
                                                     Data tier
    JavaScript
                                     REST
      HTML




                             8
Web App Evolution
•Browser incompatibilities
 • Javascript
 • Document Object Model (DOM)
•In-browser software development
 • SW Engineering support
   • Testing JavaScript code?
   • cross-browser?
 • Good debugging tools
   • Browser plugins: Firebug
   • Built in development tools
     •   IE8, Safari


                       9
JavaScript library goals
•Eliminate Browser incompatibilities
•JavaScript language enhancements
 • Class based concepts
•Library of common functionality
 • Ajax
 • DOM querying
 • DOM animation
 • UI (User Interface) widgets
   • Form controls
   • Layout controls
                10
JavaScript libraries




       11
Dojo
•http://dojotoolkit.org




              12
Outline
•Evolution in Web Applications
•Why dojo
•Showcase
•Future




             13
Why dojo
•Server side technology independent
•Software engineering paradise
 • Layered
 • Modular
 • Extensible
 • Optimizable
 • Testable
•Large Open Source Community
•Dojo foundation
                 14
Layered
                dijit                                 dojoX
• Declarative • Page Layout                      • Extensions
• Forms           • Tabs container               • Extra’s
   • validation • Border container               • Experimental
   • widgets    • CSS Themes
                                dojo core
• Internationalization     • Animation effects            • Cookie management
• Drag & Drop              • History management           • ...
                                dojo base
• Browser detection        • JavaScript                    • Animations
• DOM Querying (CSS3) • inheritance emulation              • JSON Tools
• Events, Publish/Subscribe • address incompatibilities    • Ajax communication


                                15
Layered
•Dojo-enable your page: dojo base
<html>
  <body>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js">
    </script>
  </body>
</html>



•Content Delivery Networks
<html>
  <body>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js">
    </script>
</body>
</html>




                           16
Modular
•Declaratively add functionality
•Select components
 <script type="text/javascript">
 	 dojo.require("dojo.parser");
 	 dojo.require("dijit.form.Form");
 	 dojo.require("dijit.form.Slider");
 	 dojo.require("dijit.form.DateTextBox");
 	 dojo.require("dijit.layout.TabContainer");
    ...
 </script>



•Select a theme
 <link rel="stylesheet" type="text/css"
       href="dojo/dojo/resources/dojo.css";
 <link rel="stylesheet" type="text/css"
       href="dojo/dijit/themes/tundra/tundra.css";

 <body class="tundra"></body>


                         17
Modular
•Add components to your page
 <form dojoType="dijit.form.Form">
   <div dojoType="dijit.layout.TabContainer" class="tabcontainer">
     <div dojoType="dijit.layout.ContentPane" title="Main">
       <input dojoType="dijit.form.DateTextBox"
              name="releasedate"
              type="text">
     </div>
   </div>
 </form>




                         18
Modular
•There are many




            19
Extensible
                      •Build Custom Components
<form dojoAttachEvent="onreset:_onReset,onsubmit:_onSubmit" name="${name}">
                                                                              @CHARSET "UTF-8";
  <div dojoAttachPoint="containerNode"></div>



                                                     HTML Template
  <div style="height: 1em;">&nbsp;</div>
                                                                              .CrudFormBusyPanel {
  <div dojoAttachPoint="errorMessagesNode"></div>
                                                                              	    text-align: center;
  <div dojoAttachPoint="buttonContainerNode"></div>
                                                                              	    position: absolute;
</form>
                                                                              	    top: 50%;
                                                                              	    width: 100%;


                                                                                                         CSS
     dojo.provide("ppwcode.form.CrudForm");                                   	    margin-top: -1ex;
                                                                              }
     dojo.require("ppwcode.form.ObjectForm");
     dojo.require("dijit.form.Button");                                       .CrudFormBusyMessage {
     dojo.require("dijit.Tooltip");                                             display: inline;
     dojo.require("dojo.i18n");                                               	    vertical-align: middle;
     dojo.requireLocalization("ppwcode.form", "CrudForm");                    	    margin-left: 0.5em;
                                                                              }



                                                                Dojo class
     dojo.declare(                                                            .CrudFormErrorBox {
       "ppwcode.form.CrudForm",                                               	    margin-top: 1.5ex;
       ppwcode.form.ObjectForm,                                               	    padding: 0.5ex;


                                                               (JavaScript)
       {                                                                        background-color: #FFEEEE;
         constructor: function() {                                              border: 1px solid red;
            this._tooltips = new Object();                                    }
            this._localizationbundle =
              dojo.i18n.getLocalization("ppwcode.form", "CrudForm");          .CrudFormErrorBoxTitle {
         },                                                                   	    font-weight: bold;
         postMixInProperties: function() {                                    }
            ...
         },                                                                   .CrudFormError {
         ...                                                                  	    color: red;
       });                                                                    }




                                                                       20
Extensible
           •register component library
               <script type="text/javascript"
                       src="js/dojo-release/dojo/dojo.js"
                       djConfig="modulePaths: {ppwcode: '../ppwcode'}”>
               </script>




           •Include them in your dojo page
<form id="frmYourMovie"
      dojoType="ppwcode.form.CrudForm"
      constructorFunction="Movie">
   ...
</form>




                                         21
Optimizable
•Download components
 • 1 component = 1 file
•Custom dojo builds
 • collect components in layers
   • 1 layer = 1 file
•JavaScript Optimization
 • Shrinksafe or Google closure
 • Compression rates to about 60%
   • shorten local variable names
   • remove comments, line breaks, ...
                   22
Testable
•Built-in unit test framework
•DOH: Dojo Objective Harness




             23
Community
•Forum
 • http://dojotoolkit.org/community
•Chat (IRC)
 • http://dojotoolkit.org/chat
•dojo.beer()



               24
Dojo foundation
•http://www.dojofoundation.org
•Hosts open source projects
•Goal: promote the Open Web
 • open, non-proprietary web technologies
•Some Projects

•Some (large) Contributors

               25
Outline
•Evolution in Web Applications
•Why dojo
•Showcase
 • Photo Gallery
 • CRUD applications
 • Facebook demo
 • WaveMaker
•Future

              26
Photo Gallery
•   http://hypocrates.peopleware.be:8080/Scroller
•   http://www.mahieu.org/Scroller




                   27
CRUD applications
•Custom dojo components
 • HTML Forms with CRUD semantics
 • DWR communication (Ajax)
 • Open Source
   • http://www.ppwcode.org
•Talk on Devoxx
 • http://www.mahieu.org/?p=424



               28
CRUD applications




      29
Facebook demo
http://hypocrates.peopleware.be:8080/
           FacebookDemo




               30
Facebook demo




    31
WaveMaker




  32
WaveMaker




  33
Outline
•Evolution in Web Applications
•Why dojo
•Showcase
•Future




             34
Future
•Mobile Devices
 • Mobile applications
 • Native vs. Mobile web app
 • Dojo
  • E.g. http://eventninja.net
 • Access hardware
  • PhoneGap (http://phonegap.com/)
  • Titanium (http://www.appcelerator.com)
  • E.g. http://humanapi.org


                35
Future
•Towards an open web
 • Standardization!
 • W3C Widgets
  • Similar to Dojo widgets
  • download once, store on device.
  • http://www.quirksmode.org/blog/archives/
     2009/04/introduction_to.html
 • HTML 5
  • Scripting API’s
    •   drag and drop, offline data storage, history mgt.
    •   SVG support, canvas element, timed media elements

  • E.g. http://www.youtube.com/html5
                   36
Thanks!
Questions?


  37

More Related Content

What's hot (14)

CV
CVCV
CV
 
Kiely mitchell
Kiely mitchellKiely mitchell
Kiely mitchell
 
Built to Last
Built to LastBuilt to Last
Built to Last
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
Mohamed ali ibrahim
Mohamed ali ibrahimMohamed ali ibrahim
Mohamed ali ibrahim
 
Divya ASP Developer
Divya ASP Developer Divya ASP Developer
Divya ASP Developer
 
Modular applications with montage components
Modular applications with montage componentsModular applications with montage components
Modular applications with montage components
 
Custom PrimeFaces components
Custom PrimeFaces componentsCustom PrimeFaces components
Custom PrimeFaces components
 
Unit 02: Web Technologies (2/2)
Unit 02: Web Technologies (2/2)Unit 02: Web Technologies (2/2)
Unit 02: Web Technologies (2/2)
 
Python - A Comprehensive Programming Language
Python - A Comprehensive Programming LanguagePython - A Comprehensive Programming Language
Python - A Comprehensive Programming Language
 
Jsf Framework
Jsf FrameworkJsf Framework
Jsf Framework
 
Advanced PrimeFaces
Advanced PrimeFacesAdvanced PrimeFaces
Advanced PrimeFaces
 
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
 

Viewers also liked

Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Endava
 
How dojo works
How dojo worksHow dojo works
How dojo worksAmit Tyagi
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoFu Cheng
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAmit Tyagi
 
The Dojo Toolkit An Introduction
The Dojo Toolkit   An IntroductionThe Dojo Toolkit   An Introduction
The Dojo Toolkit An IntroductionJeff Fox
 

Viewers also liked (9)

Dojo & HTML5
Dojo & HTML5Dojo & HTML5
Dojo & HTML5
 
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
 
How dojo works
How dojo worksHow dojo works
How dojo works
 
Advanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojoAdvanced guide to develop ajax applications using dojo
Advanced guide to develop ajax applications using dojo
 
Dojo toolkit
Dojo toolkitDojo toolkit
Dojo toolkit
 
Dojo tutorial
Dojo tutorialDojo tutorial
Dojo tutorial
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
The Dojo Toolkit An Introduction
The Dojo Toolkit   An IntroductionThe Dojo Toolkit   An Introduction
The Dojo Toolkit An Introduction
 
Complete Dojo
Complete DojoComplete Dojo
Complete Dojo
 

Similar to Ria with dojo

Dojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, FastDojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, FastGabriel Hamilton
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitIMC Institute
 
An Introduction to webOS
An Introduction to webOSAn Introduction to webOS
An Introduction to webOSKevin Decker
 
GDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App EngineGDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App EngineYared Ayalew
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojoyoavrubin
 
django_introduction20141030
django_introduction20141030django_introduction20141030
django_introduction20141030Kevin Wu
 
Hdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed SolutionsHdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed Solutionswoutervugt
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010Patrick Lauke
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScriptbensmithett
 
How to bake an app in Dart and Polymer
How to bake an app in Dart and PolymerHow to bake an app in Dart and Polymer
How to bake an app in Dart and PolymerJana Moudrá
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web ApplicationYakov Fain
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkecker
 
Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slideshelenmga
 

Similar to Ria with dojo (20)

Dojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, FastDojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, Fast
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
Ext JS Introduction
Ext JS IntroductionExt JS Introduction
Ext JS Introduction
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
 
An Introduction to webOS
An Introduction to webOSAn Introduction to webOS
An Introduction to webOS
 
GDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App EngineGDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App Engine
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojo
 
django_introduction20141030
django_introduction20141030django_introduction20141030
django_introduction20141030
 
netbeans
netbeansnetbeans
netbeans
 
netbeans
netbeansnetbeans
netbeans
 
Hdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed SolutionsHdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed Solutions
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
How to bake an app in Dart and Polymer
How to bake an app in Dart and PolymerHow to bake an app in Dart and Polymer
How to bake an app in Dart and Polymer
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Framework
 
Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slides
 

Recently uploaded

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 

Recently uploaded (20)

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 

Ria with dojo

  • 1. Rich Internet Applications with Dojo Tom Mahieu 24 - 04 - 2010
  • 2. About •Tom Mahieu • http://www.mahieu.org • SW Engineer, Phd Computer Science •PeopleWare • http://www.peopleware.be • Custom software development • Desktop/Web/Mobile apps, EAI • Technology: Java, .NET, Delphi • Business Intelligence • Training 2
  • 3. Outline •Evolution in Web Applications •Why dojo •Showcase •Future 3
  • 6. Web app evolution Browser tier Web tier Static HTML Internet files JavaScript HTML 6
  • 7. Web App Evolution Browser tier Web tier HTML PHP ASP Servlets Data tier Internet JSP JSF JavaScript Spring HTML ... 7
  • 8. Web App Evolution Browser tier Web tier HTML PHP ASP Servlets JSP JSF Spring Internet Web Services Data tier JavaScript REST HTML 8
  • 9. Web App Evolution •Browser incompatibilities • Javascript • Document Object Model (DOM) •In-browser software development • SW Engineering support • Testing JavaScript code? • cross-browser? • Good debugging tools • Browser plugins: Firebug • Built in development tools • IE8, Safari 9
  • 10. JavaScript library goals •Eliminate Browser incompatibilities •JavaScript language enhancements • Class based concepts •Library of common functionality • Ajax • DOM querying • DOM animation • UI (User Interface) widgets • Form controls • Layout controls 10
  • 13. Outline •Evolution in Web Applications •Why dojo •Showcase •Future 13
  • 14. Why dojo •Server side technology independent •Software engineering paradise • Layered • Modular • Extensible • Optimizable • Testable •Large Open Source Community •Dojo foundation 14
  • 15. Layered dijit dojoX • Declarative • Page Layout • Extensions • Forms • Tabs container • Extra’s • validation • Border container • Experimental • widgets • CSS Themes dojo core • Internationalization • Animation effects • Cookie management • Drag & Drop • History management • ... dojo base • Browser detection • JavaScript • Animations • DOM Querying (CSS3) • inheritance emulation • JSON Tools • Events, Publish/Subscribe • address incompatibilities • Ajax communication 15
  • 16. Layered •Dojo-enable your page: dojo base <html> <body> <script type="text/javascript" src="js/dojo/dojo/dojo.js"> </script> </body> </html> •Content Delivery Networks <html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"> </script> </body> </html> 16
  • 17. Modular •Declaratively add functionality •Select components <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Form"); dojo.require("dijit.form.Slider"); dojo.require("dijit.form.DateTextBox"); dojo.require("dijit.layout.TabContainer"); ... </script> •Select a theme <link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css"; <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css"; <body class="tundra"></body> 17
  • 18. Modular •Add components to your page <form dojoType="dijit.form.Form"> <div dojoType="dijit.layout.TabContainer" class="tabcontainer"> <div dojoType="dijit.layout.ContentPane" title="Main"> <input dojoType="dijit.form.DateTextBox" name="releasedate" type="text"> </div> </div> </form> 18
  • 20. Extensible •Build Custom Components <form dojoAttachEvent="onreset:_onReset,onsubmit:_onSubmit" name="${name}"> @CHARSET "UTF-8"; <div dojoAttachPoint="containerNode"></div> HTML Template <div style="height: 1em;">&nbsp;</div> .CrudFormBusyPanel { <div dojoAttachPoint="errorMessagesNode"></div> text-align: center; <div dojoAttachPoint="buttonContainerNode"></div> position: absolute; </form> top: 50%; width: 100%; CSS dojo.provide("ppwcode.form.CrudForm"); margin-top: -1ex; } dojo.require("ppwcode.form.ObjectForm"); dojo.require("dijit.form.Button"); .CrudFormBusyMessage { dojo.require("dijit.Tooltip"); display: inline; dojo.require("dojo.i18n"); vertical-align: middle; dojo.requireLocalization("ppwcode.form", "CrudForm"); margin-left: 0.5em; } Dojo class dojo.declare( .CrudFormErrorBox { "ppwcode.form.CrudForm", margin-top: 1.5ex; ppwcode.form.ObjectForm, padding: 0.5ex; (JavaScript) { background-color: #FFEEEE; constructor: function() { border: 1px solid red; this._tooltips = new Object(); } this._localizationbundle = dojo.i18n.getLocalization("ppwcode.form", "CrudForm"); .CrudFormErrorBoxTitle { }, font-weight: bold; postMixInProperties: function() { } ... }, .CrudFormError { ... color: red; }); } 20
  • 21. Extensible •register component library <script type="text/javascript" src="js/dojo-release/dojo/dojo.js" djConfig="modulePaths: {ppwcode: '../ppwcode'}”> </script> •Include them in your dojo page <form id="frmYourMovie" dojoType="ppwcode.form.CrudForm" constructorFunction="Movie"> ... </form> 21
  • 22. Optimizable •Download components • 1 component = 1 file •Custom dojo builds • collect components in layers • 1 layer = 1 file •JavaScript Optimization • Shrinksafe or Google closure • Compression rates to about 60% • shorten local variable names • remove comments, line breaks, ... 22
  • 23. Testable •Built-in unit test framework •DOH: Dojo Objective Harness 23
  • 24. Community •Forum • http://dojotoolkit.org/community •Chat (IRC) • http://dojotoolkit.org/chat •dojo.beer() 24
  • 25. Dojo foundation •http://www.dojofoundation.org •Hosts open source projects •Goal: promote the Open Web • open, non-proprietary web technologies •Some Projects •Some (large) Contributors 25
  • 26. Outline •Evolution in Web Applications •Why dojo •Showcase • Photo Gallery • CRUD applications • Facebook demo • WaveMaker •Future 26
  • 27. Photo Gallery • http://hypocrates.peopleware.be:8080/Scroller • http://www.mahieu.org/Scroller 27
  • 28. CRUD applications •Custom dojo components • HTML Forms with CRUD semantics • DWR communication (Ajax) • Open Source • http://www.ppwcode.org •Talk on Devoxx • http://www.mahieu.org/?p=424 28
  • 34. Outline •Evolution in Web Applications •Why dojo •Showcase •Future 34
  • 35. Future •Mobile Devices • Mobile applications • Native vs. Mobile web app • Dojo • E.g. http://eventninja.net • Access hardware • PhoneGap (http://phonegap.com/) • Titanium (http://www.appcelerator.com) • E.g. http://humanapi.org 35
  • 36. Future •Towards an open web • Standardization! • W3C Widgets • Similar to Dojo widgets • download once, store on device. • http://www.quirksmode.org/blog/archives/ 2009/04/introduction_to.html • HTML 5 • Scripting API’s • drag and drop, offline data storage, history mgt. • SVG support, canvas element, timed media elements • E.g. http://www.youtube.com/html5 36