SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
Infusion For The Birds




  Colin Clark, Lead Software Architect,
  Inclusive Design Research Centre
Sunday, January 9, 2011
Stuff we’ll talk about
                          •   What is Infusion and why did we make it?

                          •   JavaScript tools: compare and contrast

                          •   DOM Agnosticism

                          •   Model,View, but no Controller

                          •   Play nice with others

                          •   Inspired by the Web

                          •   What’s our mission?

                          •   Where we’re going

Sunday, January 9, 2011
World, Meet Infusion

                 • Application framework built on top of jQuery
                 • The culmination of our work helping others
                 • Designed for usability and accessibility
                 • Open architecture: everything is configurable

Sunday, January 9, 2011
What’s in Infusion?


                 • A development framework for building apps
                 • UI components you can reuse and adapt
                 • Lightweight CSS framework for styling
                 • Accessibility tools and plugins for jQuery

Sunday, January 9, 2011
Why bother?

                    • We didn’t build a framework because
                          they’re fun to write. They’re not.
                    • We built a bunch of components, suffered,
                          and then built a framework that addressed
                          real challenges.




Sunday, January 9, 2011
Building Great UIs Is Hard

                          • Your code gets unruly as it grows
                          • UIs are hard to reuse or repurpose
                          • Design change requires big code change
                          • Accessibility is confusing
                          • Combining different code/libraries doesn’t
                            always work


Sunday, January 9, 2011
Flexible User Interfaces


                 Infusion is an application framework designed to
                 provide unprecedented flexibility while
                 preserving interoperability.




Sunday, January 9, 2011
Types of JavaScript Tools

                          • Foundational Toolkits
                          • Application Frameworks
                               ... compare and contrast




Sunday, January 9, 2011
Foundational toolkits

                •         Totally presentation focused
                •         DOM manipulation
                •         Event binding                     jQuery
                •         Ajax                           Prototype
                                                         Dojo core



Sunday, January 9, 2011
Application frameworks

                • Model notifications “something changed here”
                • Views to help keep your presentational code clean
                • Data binding to sync the display with your model
                                                             SproutCore
                                                              Dojo/Dijit/
                                                                  Dojox
                                                             Cappuccino


Sunday, January 9, 2011
Infusion is Different

                          • Accessibility baked right in
                          • Carefully designed interactions
                          • Markup is in your control
                          • Not the same old MVC
                          • Supports portals, mashups and CMS’s

Sunday, January 9, 2011
Open Architecture



Sunday, January 9, 2011
Markup Agnosticism
                          • HTML is so fundamental to Web UIs
                          • Others lock away markup in a black box
                          • Markup should be totally free to edit, adapt,
                            or replace
                          • Libraries shouldn’t bake in assumptions
                            about your markup
                          • Unobtrusiveness everywhere
Sunday, January 9, 2011
Handling Markup: Dojo
          <div class="dijitDialog" tabindex="-1" waiRole="dialog"
          waiState="labelledby-${id}_title">
             <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar">
             <span dojoAttachPoint="titleNode" class="dijitDialogTitle"
          id="${id}_title"></span>
             <span dojoAttachPoint="closeButtonNode"
          class="dijitDialogCloseIcon" dojoAttachEvent="onclick: onCancel,
          onmouseenter: _onCloseEnter, onmouseleave: _onCloseLeave"
          title="${buttonCancel}">
                 <span dojoAttachPoint="closeText" class="closeText"
          title="${buttonCancel}">x</span>
             </span>
             </div>
                 <div dojoAttachPoint="containerNode"
          class="dijitDialogPaneContent"></div>
          </div>

Sunday, January 9, 2011
Handling Markup: jQuery UI




Sunday, January 9, 2011
Handling Markup: Infusion
       fluid.defaults("fluid.fileQueueView", {
          selectors: {
            fileRows: ".flc-uploader-file",
            fileName: ".flc-uploader-file-name",
            fileSize: ".flc-uploader-file-size",
            fileIconBtn: ".flc-uploader-file-action",
            errorText: ".flc-uploader-file-error"
       },




Sunday, January 9, 2011
Components
      “Components suck. Apps built with components look like it”

                          • Infusion components aren’t black boxes
                          • They’re fundamentally adaptable:
                           • Change the markup
                           • Restyle with CSS
                           • Add/replace actual behaviour
                          • Everything is super-loosely coupled
Sunday, January 9, 2011
Component Families: Reorderer




                     lists                   images             layouts



                             Infusion components come in families



Sunday, January 9, 2011
Traditional MVC

                                           Model


                                                    n
                                                atio
                                           oti c
                          State Query                               State Change
                                         ge N
                                            n
                                        Cha




                                                 View Selection


                             View                                 Controller
                                                User Gestures




Sunday, January 9, 2011
The Problem with Controllers

                  • Controllers are the least defined
                  • What’s “glue?”
                  • Always referred to as the non-reusable part
                  • MVC has been warped over the decades
                  • The framework should take care of the glue

Sunday, January 9, 2011
Infusion Models & Views
                                                       Model
    • Controller is replaced by events               Change Noti cation




    • Reads to the model are transparent
    • State changes and notification are
            just events                       State Query         State Change



    • Transparent architecture: you can use             View
            the same events we use
                                                  Framework

Sunday, January 9, 2011
Model, View... but not Controller


                          • MVC is a given in most framework
                          • JavaScript’s functional idioms offer
                            alternatives (hint: events)
                          • Infusion has no controller layer at all
                          • ... and none of the classical inheritance cruft
                            that usually goes with it


Sunday, January 9, 2011
Plain Old Models

                    • M is the most important thing in your app
                    • Data needs to travel seamlessly between
                          client and server
                    • Most toolkits force a model to extend
                          some base class or particular structure

                          In Infusion, models are just plain old JSON


Sunday, January 9, 2011
Playing Nice With Others



Sunday, January 9, 2011
Portals, Mashups, and CMS’s


                • These days, diverse code and markup coexists
                • Most JavaScript is written as if it owns the
                          whole browser
                • As you combine stuff, things can break
                • Namespacing and privacy is essential

Sunday, January 9, 2011
Keeping it to Ourselves

                    • Infusion takes namespacing seriously
                    • We won’t steal your names
                    • Components are carefully scoped
                    • We won’t accidentally grab the wrong stuff
                    • Infusion doesn’t expect control of the page

Sunday, January 9, 2011
Tying it All Together

                    • Infusion helps you with accessibility
                    • Components you can really work with
                    • Simple structure so your code can grow
                    • Totally transparent, event-driven design
                    • Markup and models are under your control
                    • No inheritance or controller cruft
Sunday, January 9, 2011
The Web



Sunday, January 9, 2011
Architecture of the Web

                    • Separation of structure from presentation
                    • Declarative
                    • Stateless
                    • Interoperable

Sunday, January 9, 2011
Structure vs. Presentation

   <ul class="fl-list-menu">       .fl-list-menu li {
     <li>                             padding:0;
       <a href="#">Link Text</a>   }
     </li>                         .fl-list-menu li a {
     <li>                              display:block;
       <a href="#">Link Text</a>       padding: 12px 0px 12px
     </li>                         12px;
     <li>                              text-decoration: none;
       <a href="#">Link Text</a>       font-weight: bold;
     </li>                             outline: none;
   </ul>                           }


Sunday, January 9, 2011
Declarative Programming

                          Declarative programming is a programming
                          paradigm that expresses the logic of a
                          computation without describing its control
                          flow




Sunday, January 9, 2011
Declarative Programming

                          what
                          not



                          how
Sunday, January 9, 2011
Compare & Contrast




Sunday, January 9, 2011
Compare & Contrast


                          Scroller




Sunday, January 9, 2011
Imperative
                          if (!highlighted) {
                              ctx.globalAlpha = 0.3;
                          } else {
                              // Draw the scroll track rectangle.
                              var clientLength = this._getClientLength();
                              ctx.fillStyle = theme.scrollTrackFillStyle;
                              ctx.fillRect(NIB_PADDING + 0.5, 0.5,
                              clientLength - 2*NIB_PADDING, thickness - 1);
                              ctx.strokeStyle = theme.scrollTrackStrokeStyle;
                              ctx.strokeRect(NIB_PADDING + 0.5, 0.5,
                                 clientLength - 2*NIB_PADDING, thickness - 1);
                          }

                          var buildHandlePath = function() {
                              ctx.beginPath();
                              ctx.arc(handleDistance + halfThickness + 0.5,                 // x
                              halfThickness,                                     // y
                              halfThickness - 0.5, Math.PI / 2, 3 * Math.PI / 2, false);
                              ctx.arc(handleDistance + handleLength - halfThickness - 0.5, // x
                                 halfThickness,                                     // y
                                 halfThickness - 0.5, 3 * Math.PI / 2, Math.PI / 2, false);
                              ctx.lineTo(handleDistance + halfThickness + 0.5, thickness - 0.5);
                              ctx.closePath();
                          };
                          buildHandlePath();

                          // Paint the interior of the handle path.
                          var gradient = ctx.createLinearGradient(handleDistance, 0,
                                            handleDistance, thickness);
                          gradient.addColorStop(0,
                             theme.scrollBarFillGradientTopStart.replace(/%a/, alpha));
                          gradient.addColorStop(0.4,
                             theme.scrollBarFillGradientTopStop.replace(/%a/, alpha));
                          gradient.addColorStop(0.41,
                             theme.scrollBarFillStyle.replace(/%a/, alpha));
                          gradient.addColorStop(0.8,
                              theme.scrollBarFillGradientBottomStart.replace(/%a/, alpha));
                          gradient.addColorStop(1,
                              theme.scrollBarFillGradientBottomStop.replace(/%a/, alpha));
                          ctx.fillStyle = gradient;
                          ctx.fill();



Sunday, January 9, 2011
Declarative

                                                 .fl-thumbnailContainer {
                                                    position: absolute;
                                                    top: 0pt;
          <form class="fl-thumbnailContainer">      left: 0pt;
            ...                                     bottom: 0pt;
          </form>                                   overflow: auto;
                                                    width: 185px;
                                                    z-index: 100;
                                                 }




Sunday, January 9, 2011
Statelessness


                          “The Web is broken. It can’t remember me
                          between requests”




Sunday, January 9, 2011
Statelessness

                • The Web is stateless for a reason: it scales
                • State is visible, not encapsulated

                          http://build.fluidproject.org:8095/engage/artifacts/view.html?
                                    accessNumber=M2000.38.97&db=mccord&lang=en




Sunday, January 9, 2011
Interoperable
                    • Web formats are:
                     • Plain text
                     • Declarative
                     • Openly published and standardized

                    • This means they are adaptable and extensible
Sunday, January 9, 2011
Context is Everything




Sunday, January 9, 2011
Our Mission




Sunday, January 9, 2011
Where We’re Going



Sunday, January 9, 2011
Goals and Next Steps

                • Accessibility sprint
                • Make it mature and production-ready
                • Mobile
                • Authoring
                • Context-based transformation

Sunday, January 9, 2011
Goals of OO

                          •   Define a system in real-world terms
                          •   Hide away the guts of an implementation
                          •   Create small, useful modules
                          •   Enable reusability




Sunday, January 9, 2011
Three Pillars of OO

                          1. Inheritance
                          2. Encapsulation
                          3. Polymorphism




Sunday, January 9, 2011
Inheritance
                          • A way of structuring dependencies and
                              reusing code
                          •   Defines the identity of an object (is a)
                          •   Mammals, Felines, Cats and Lions
                          •   Vehicles, Cars, and Trucks
                          •   Fruit, Apples, Oranges
                          •   Lots of other contrived examples...

Sunday, January 9, 2011
Inheritance
                                                        AbstractMap
                                                                 Method




                                                        Method




                                                                          Method
                                                                  Data

                                                                 Method




                          IdentityHashMap                                          HashMap
                                      Method                                                Method
                             Method




                                               Method




                                                                                   Method




                                                                                                     Method
                                      Data                                                  Data

                                      Method                                                Method




                                        PrinterStateReasons LinkedHashMap
                                                                 Method                                                Method
                                                        Method




                                                                          Method




                                                                                                              Method




                                                                                                                                Method
                                                                 Data                                                  Data

                                                                 Method                                                Method




Sunday, January 9, 2011
Encapsulation

                          • Hide away the internals of an object
                          • Define a contract through methods
                          • Traditionally, data is considered opaque



Sunday, January 9, 2011
Encapsulated Object

                                        Method
                               Method




                                                 Method
                                        Data

                                        Method




Sunday, January 9, 2011
Polymorphism
                          • The ability for different objects to
                            respond to the same method in different
                            ways
                          • Interface vs. implementation




Sunday, January 9, 2011
Crumbling Pillars
                          • Inheritance is brittle and ineffective
                          • Composition (has a) works better
                          • Encapsulation leads to overzealousness:
                            • Cuts off access to useful information
                            • Assumes custom structures are better than
                               plain old, interoperable standards



Sunday, January 9, 2011
Model View Controller

                    •     Model is the application data and associated
                          behaviour

                    •     View presents the model and drives the
                          interaction logic

                    •     Controller is glue, mediating access between
                          model and view




Sunday, January 9, 2011
Traditional MVC

                                           Model


                                                    n
                                                atio
                                           oti c
                          State Query                               State Change
                                         ge N
                                            n
                                        Cha




                                                 View Selection


                             View                                 Controller
                                                User Gestures




Sunday, January 9, 2011
The Problem with Controllers


                    •     Controllers are the least defined part of the
                          equation

                    •     What’s “glue?”

                    •     Always referred to as the non-reusable part

                    •     MVC has been warped over the decades




Sunday, January 9, 2011
Controllers and Frameworks

                    •     Orginally, in Smalltalk, the Controller managed the
                          low-level event loop for an application

                    •     In Web apps, they’re usually responsible for parsing
                          requests and dispatching

                    •     These are both things that high-level frameworks
                          do for us now

                    •     E.g. The event loop in a Web browser



Sunday, January 9, 2011
Model View                      (controller)



                                      Model
                                    Change Noti cation




                             State Query         State Change



                                       View

                                 Framework

Sunday, January 9, 2011
Questions?



Sunday, January 9, 2011

Contenu connexe

Similaire à Infusion for the birds

JavaSE - The road forward
JavaSE - The road forwardJavaSE - The road forward
JavaSE - The road forward
eug3n_cojocaru
 
JavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayJavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies Today
Wesley Hales
 
Test Driven Sysadmin
Test Driven SysadminTest Driven Sysadmin
Test Driven Sysadmin
johanku
 
Javascript framework and backbone
Javascript framework and backboneJavascript framework and backbone
Javascript framework and backbone
Daniel Lv
 
jQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new featuresjQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new features
Ryan Blunden
 
[DCTPE2011] 7) Mobile Drupal(英/中雙語)
[DCTPE2011] 7) Mobile Drupal(英/中雙語)[DCTPE2011] 7) Mobile Drupal(英/中雙語)
[DCTPE2011] 7) Mobile Drupal(英/中雙語)
Drupal Taiwan
 
Styles of Applicaton Integration Using Spring
Styles of Applicaton Integration Using SpringStyles of Applicaton Integration Using Spring
Styles of Applicaton Integration Using Spring
Bruce Snyder
 
Building GPE: What We Learned
Building GPE: What We LearnedBuilding GPE: What We Learned
Building GPE: What We Learned
rajeevdayal
 
02 Objective C
02 Objective C02 Objective C
02 Objective C
Mahmoud
 

Similaire à Infusion for the birds (20)

Integrating ECM (WebCenter Content) with your Enterprise! 5 Tips to Try, 5 Tr...
Integrating ECM (WebCenter Content) with your Enterprise! 5 Tips to Try, 5 Tr...Integrating ECM (WebCenter Content) with your Enterprise! 5 Tips to Try, 5 Tr...
Integrating ECM (WebCenter Content) with your Enterprise! 5 Tips to Try, 5 Tr...
 
SplunkLive New York 2011: DealerTrack
SplunkLive New York 2011: DealerTrackSplunkLive New York 2011: DealerTrack
SplunkLive New York 2011: DealerTrack
 
JavaSE - The road forward
JavaSE - The road forwardJavaSE - The road forward
JavaSE - The road forward
 
JavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayJavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies Today
 
Governing services, data, rules, processes and more
Governing services, data, rules, processes and moreGoverning services, data, rules, processes and more
Governing services, data, rules, processes and more
 
Test Driven Sysadmin
Test Driven SysadminTest Driven Sysadmin
Test Driven Sysadmin
 
Javascript framework and backbone
Javascript framework and backboneJavascript framework and backbone
Javascript framework and backbone
 
Are Your Tests Really Helping You?
Are Your Tests Really Helping You?Are Your Tests Really Helping You?
Are Your Tests Really Helping You?
 
Plone IDE - the future of Plone development
Plone IDE - the future of Plone developmentPlone IDE - the future of Plone development
Plone IDE - the future of Plone development
 
Introducing the Ceylon Project - Gavin King presentation at QCon Beijing 2011
Introducing the Ceylon Project - Gavin King presentation at QCon Beijing 2011Introducing the Ceylon Project - Gavin King presentation at QCon Beijing 2011
Introducing the Ceylon Project - Gavin King presentation at QCon Beijing 2011
 
Introducing the Ceylon Project
Introducing the Ceylon ProjectIntroducing the Ceylon Project
Introducing the Ceylon Project
 
Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)
 
jQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new featuresjQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new features
 
Mobile drupal: building a mobile theme
Mobile drupal: building a mobile themeMobile drupal: building a mobile theme
Mobile drupal: building a mobile theme
 
[DCTPE2011] 7) Mobile Drupal(英/中雙語)
[DCTPE2011] 7) Mobile Drupal(英/中雙語)[DCTPE2011] 7) Mobile Drupal(英/中雙語)
[DCTPE2011] 7) Mobile Drupal(英/中雙語)
 
Styles of Applicaton Integration Using Spring
Styles of Applicaton Integration Using SpringStyles of Applicaton Integration Using Spring
Styles of Applicaton Integration Using Spring
 
STI Summit 2011 - Linked services
STI Summit 2011 - Linked servicesSTI Summit 2011 - Linked services
STI Summit 2011 - Linked services
 
Building GPE: What We Learned
Building GPE: What We LearnedBuilding GPE: What We Learned
Building GPE: What We Learned
 
Angular js gtg-27feb2013
Angular js gtg-27feb2013Angular js gtg-27feb2013
Angular js gtg-27feb2013
 
02 Objective C
02 Objective C02 Objective C
02 Objective C
 

Plus de colinbdclark

Plus de colinbdclark (11)

Flocking at the SuperCollider Symposium 2013
Flocking at the SuperCollider Symposium 2013Flocking at the SuperCollider Symposium 2013
Flocking at the SuperCollider Symposium 2013
 
Open Inclusive Design
Open Inclusive DesignOpen Inclusive Design
Open Inclusive Design
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
Nothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive WebNothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive Web
 
Mobile Development with uPortal and Infusion
Mobile Development with uPortal and InfusionMobile Development with uPortal and Infusion
Mobile Development with uPortal and Infusion
 
Web Accessibility and Design
Web Accessibility and DesignWeb Accessibility and Design
Web Accessibility and Design
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuery
 
Accessible UIs with jQuery and Infusion
Accessible UIs with jQuery and InfusionAccessible UIs with jQuery and Infusion
Accessible UIs with jQuery and Infusion
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
 
Architectures for Inclusive Design
Architectures for Inclusive DesignArchitectures for Inclusive Design
Architectures for Inclusive Design
 
Thoughts on Open Accessibility
Thoughts on Open AccessibilityThoughts on Open Accessibility
Thoughts on Open Accessibility
 

Dernier

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Dernier (20)

Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 

Infusion for the birds

  • 1. Infusion For The Birds Colin Clark, Lead Software Architect, Inclusive Design Research Centre Sunday, January 9, 2011
  • 2. Stuff we’ll talk about • What is Infusion and why did we make it? • JavaScript tools: compare and contrast • DOM Agnosticism • Model,View, but no Controller • Play nice with others • Inspired by the Web • What’s our mission? • Where we’re going Sunday, January 9, 2011
  • 3. World, Meet Infusion • Application framework built on top of jQuery • The culmination of our work helping others • Designed for usability and accessibility • Open architecture: everything is configurable Sunday, January 9, 2011
  • 4. What’s in Infusion? • A development framework for building apps • UI components you can reuse and adapt • Lightweight CSS framework for styling • Accessibility tools and plugins for jQuery Sunday, January 9, 2011
  • 5. Why bother? • We didn’t build a framework because they’re fun to write. They’re not. • We built a bunch of components, suffered, and then built a framework that addressed real challenges. Sunday, January 9, 2011
  • 6. Building Great UIs Is Hard • Your code gets unruly as it grows • UIs are hard to reuse or repurpose • Design change requires big code change • Accessibility is confusing • Combining different code/libraries doesn’t always work Sunday, January 9, 2011
  • 7. Flexible User Interfaces Infusion is an application framework designed to provide unprecedented flexibility while preserving interoperability. Sunday, January 9, 2011
  • 8. Types of JavaScript Tools • Foundational Toolkits • Application Frameworks ... compare and contrast Sunday, January 9, 2011
  • 9. Foundational toolkits • Totally presentation focused • DOM manipulation • Event binding jQuery • Ajax Prototype Dojo core Sunday, January 9, 2011
  • 10. Application frameworks • Model notifications “something changed here” • Views to help keep your presentational code clean • Data binding to sync the display with your model SproutCore Dojo/Dijit/ Dojox Cappuccino Sunday, January 9, 2011
  • 11. Infusion is Different • Accessibility baked right in • Carefully designed interactions • Markup is in your control • Not the same old MVC • Supports portals, mashups and CMS’s Sunday, January 9, 2011
  • 13. Markup Agnosticism • HTML is so fundamental to Web UIs • Others lock away markup in a black box • Markup should be totally free to edit, adapt, or replace • Libraries shouldn’t bake in assumptions about your markup • Unobtrusiveness everywhere Sunday, January 9, 2011
  • 14. Handling Markup: Dojo <div class="dijitDialog" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title"> <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar"> <span dojoAttachPoint="titleNode" class="dijitDialogTitle" id="${id}_title"></span> <span dojoAttachPoint="closeButtonNode" class="dijitDialogCloseIcon" dojoAttachEvent="onclick: onCancel, onmouseenter: _onCloseEnter, onmouseleave: _onCloseLeave" title="${buttonCancel}"> <span dojoAttachPoint="closeText" class="closeText" title="${buttonCancel}">x</span> </span> </div> <div dojoAttachPoint="containerNode" class="dijitDialogPaneContent"></div> </div> Sunday, January 9, 2011
  • 15. Handling Markup: jQuery UI Sunday, January 9, 2011
  • 16. Handling Markup: Infusion fluid.defaults("fluid.fileQueueView", { selectors: { fileRows: ".flc-uploader-file", fileName: ".flc-uploader-file-name", fileSize: ".flc-uploader-file-size", fileIconBtn: ".flc-uploader-file-action", errorText: ".flc-uploader-file-error" }, Sunday, January 9, 2011
  • 17. Components “Components suck. Apps built with components look like it” • Infusion components aren’t black boxes • They’re fundamentally adaptable: • Change the markup • Restyle with CSS • Add/replace actual behaviour • Everything is super-loosely coupled Sunday, January 9, 2011
  • 18. Component Families: Reorderer lists images layouts Infusion components come in families Sunday, January 9, 2011
  • 19. Traditional MVC Model n atio oti c State Query State Change ge N n Cha View Selection View Controller User Gestures Sunday, January 9, 2011
  • 20. The Problem with Controllers • Controllers are the least defined • What’s “glue?” • Always referred to as the non-reusable part • MVC has been warped over the decades • The framework should take care of the glue Sunday, January 9, 2011
  • 21. Infusion Models & Views Model • Controller is replaced by events Change Noti cation • Reads to the model are transparent • State changes and notification are just events State Query State Change • Transparent architecture: you can use View the same events we use Framework Sunday, January 9, 2011
  • 22. Model, View... but not Controller • MVC is a given in most framework • JavaScript’s functional idioms offer alternatives (hint: events) • Infusion has no controller layer at all • ... and none of the classical inheritance cruft that usually goes with it Sunday, January 9, 2011
  • 23. Plain Old Models • M is the most important thing in your app • Data needs to travel seamlessly between client and server • Most toolkits force a model to extend some base class or particular structure In Infusion, models are just plain old JSON Sunday, January 9, 2011
  • 24. Playing Nice With Others Sunday, January 9, 2011
  • 25. Portals, Mashups, and CMS’s • These days, diverse code and markup coexists • Most JavaScript is written as if it owns the whole browser • As you combine stuff, things can break • Namespacing and privacy is essential Sunday, January 9, 2011
  • 26. Keeping it to Ourselves • Infusion takes namespacing seriously • We won’t steal your names • Components are carefully scoped • We won’t accidentally grab the wrong stuff • Infusion doesn’t expect control of the page Sunday, January 9, 2011
  • 27. Tying it All Together • Infusion helps you with accessibility • Components you can really work with • Simple structure so your code can grow • Totally transparent, event-driven design • Markup and models are under your control • No inheritance or controller cruft Sunday, January 9, 2011
  • 29. Architecture of the Web • Separation of structure from presentation • Declarative • Stateless • Interoperable Sunday, January 9, 2011
  • 30. Structure vs. Presentation <ul class="fl-list-menu"> .fl-list-menu li { <li> padding:0; <a href="#">Link Text</a> } </li> .fl-list-menu li a {   <li> display:block; <a href="#">Link Text</a> padding: 12px 0px 12px </li> 12px;   <li> text-decoration: none; <a href="#">Link Text</a> font-weight: bold; </li> outline: none; </ul> } Sunday, January 9, 2011
  • 31. Declarative Programming Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow Sunday, January 9, 2011
  • 32. Declarative Programming what not how Sunday, January 9, 2011
  • 33. Compare & Contrast Sunday, January 9, 2011
  • 34. Compare & Contrast Scroller Sunday, January 9, 2011
  • 35. Imperative if (!highlighted) { ctx.globalAlpha = 0.3; } else { // Draw the scroll track rectangle. var clientLength = this._getClientLength(); ctx.fillStyle = theme.scrollTrackFillStyle; ctx.fillRect(NIB_PADDING + 0.5, 0.5, clientLength - 2*NIB_PADDING, thickness - 1); ctx.strokeStyle = theme.scrollTrackStrokeStyle; ctx.strokeRect(NIB_PADDING + 0.5, 0.5, clientLength - 2*NIB_PADDING, thickness - 1); } var buildHandlePath = function() { ctx.beginPath(); ctx.arc(handleDistance + halfThickness + 0.5, // x halfThickness, // y halfThickness - 0.5, Math.PI / 2, 3 * Math.PI / 2, false); ctx.arc(handleDistance + handleLength - halfThickness - 0.5, // x halfThickness, // y halfThickness - 0.5, 3 * Math.PI / 2, Math.PI / 2, false); ctx.lineTo(handleDistance + halfThickness + 0.5, thickness - 0.5); ctx.closePath(); }; buildHandlePath(); // Paint the interior of the handle path. var gradient = ctx.createLinearGradient(handleDistance, 0, handleDistance, thickness); gradient.addColorStop(0, theme.scrollBarFillGradientTopStart.replace(/%a/, alpha)); gradient.addColorStop(0.4, theme.scrollBarFillGradientTopStop.replace(/%a/, alpha)); gradient.addColorStop(0.41, theme.scrollBarFillStyle.replace(/%a/, alpha)); gradient.addColorStop(0.8, theme.scrollBarFillGradientBottomStart.replace(/%a/, alpha)); gradient.addColorStop(1, theme.scrollBarFillGradientBottomStop.replace(/%a/, alpha)); ctx.fillStyle = gradient; ctx.fill(); Sunday, January 9, 2011
  • 36. Declarative .fl-thumbnailContainer { position: absolute; top: 0pt; <form class="fl-thumbnailContainer"> left: 0pt; ... bottom: 0pt; </form> overflow: auto; width: 185px; z-index: 100; } Sunday, January 9, 2011
  • 37. Statelessness “The Web is broken. It can’t remember me between requests” Sunday, January 9, 2011
  • 38. Statelessness • The Web is stateless for a reason: it scales • State is visible, not encapsulated http://build.fluidproject.org:8095/engage/artifacts/view.html? accessNumber=M2000.38.97&db=mccord&lang=en Sunday, January 9, 2011
  • 39. Interoperable • Web formats are: • Plain text • Declarative • Openly published and standardized • This means they are adaptable and extensible Sunday, January 9, 2011
  • 40. Context is Everything Sunday, January 9, 2011
  • 42. Where We’re Going Sunday, January 9, 2011
  • 43. Goals and Next Steps • Accessibility sprint • Make it mature and production-ready • Mobile • Authoring • Context-based transformation Sunday, January 9, 2011
  • 44. Goals of OO • Define a system in real-world terms • Hide away the guts of an implementation • Create small, useful modules • Enable reusability Sunday, January 9, 2011
  • 45. Three Pillars of OO 1. Inheritance 2. Encapsulation 3. Polymorphism Sunday, January 9, 2011
  • 46. Inheritance • A way of structuring dependencies and reusing code • Defines the identity of an object (is a) • Mammals, Felines, Cats and Lions • Vehicles, Cars, and Trucks • Fruit, Apples, Oranges • Lots of other contrived examples... Sunday, January 9, 2011
  • 47. Inheritance AbstractMap Method Method Method Data Method IdentityHashMap HashMap Method Method Method Method Method Method Data Data Method Method PrinterStateReasons LinkedHashMap Method Method Method Method Method Method Data Data Method Method Sunday, January 9, 2011
  • 48. Encapsulation • Hide away the internals of an object • Define a contract through methods • Traditionally, data is considered opaque Sunday, January 9, 2011
  • 49. Encapsulated Object Method Method Method Data Method Sunday, January 9, 2011
  • 50. Polymorphism • The ability for different objects to respond to the same method in different ways • Interface vs. implementation Sunday, January 9, 2011
  • 51. Crumbling Pillars • Inheritance is brittle and ineffective • Composition (has a) works better • Encapsulation leads to overzealousness: • Cuts off access to useful information • Assumes custom structures are better than plain old, interoperable standards Sunday, January 9, 2011
  • 52. Model View Controller • Model is the application data and associated behaviour • View presents the model and drives the interaction logic • Controller is glue, mediating access between model and view Sunday, January 9, 2011
  • 53. Traditional MVC Model n atio oti c State Query State Change ge N n Cha View Selection View Controller User Gestures Sunday, January 9, 2011
  • 54. The Problem with Controllers • Controllers are the least defined part of the equation • What’s “glue?” • Always referred to as the non-reusable part • MVC has been warped over the decades Sunday, January 9, 2011
  • 55. Controllers and Frameworks • Orginally, in Smalltalk, the Controller managed the low-level event loop for an application • In Web apps, they’re usually responsible for parsing requests and dispatching • These are both things that high-level frameworks do for us now • E.g. The event loop in a Web browser Sunday, January 9, 2011
  • 56. Model View (controller) Model Change Noti cation State Query State Change View Framework Sunday, January 9, 2011