SlideShare une entreprise Scribd logo
1  sur  28
Télécharger pour lire hors ligne
Modular & Event driven
   UI Architecture
     Vytautas Butkus
Content
•   Modules
•   Event driven architecture
•   Backbone.js - MV* framework
•   Questions
Modules
• What is it?
• Single, solid unit
• Have interfaces defined
• Made of multiple other modules
Modules
• What is it?
• Why use it?
•   Loose coupling
•   Easier maintanance
•   Changes affects only changed modules
•   Removed module does not break page
Modules
• What is it?
• Why use it?
• Modules in real life
Gmail system
Possible modules
Modules structure
Event driven architecture
• What is it?
Publish/Subscribe pattern
Event driven architecture
• What is it?
• Where is it used?
•   Node.js
•   jQuery.events
•   Backbone.js
•   OS interrups

$(“.button”).on(“click”, function(){
$(“body”).on(“click”, function(){
    $(“body”).trigger(“alarm”);
    alert(“Clicked”);
});
$(“body”).on(“alarm”, function(){
    alert(“Alarm alarm!!!”);
});
Modular & Event driven UI Architecture
Backbone.js
                 library
•   Structural framework
•   Very popular
•   Huge community
•   Still under v1.0
•   RESTful JSON interface
•   Based on MVC paradigm
                MV*
Backbone tools
•   Models                         => { } with events & sync

•   Views                          => DOM controller

•   Collections (not controller)   => Array of models

•   Router                         => URL controller

•   Events                         => Extend native { }
Underscore.js
•   Utility-belt library
•   Eases work with collections, arrays & objects
•   Provides function helpers
•   The only one Backbone.js dependency
Other MV* frameworks
•   AngularJS (by Google)
•   Ember.js
•   YUI (by Yahoo!)
•   KnockoutJS
...many more

• Check them out at
Gmail example with Backbone.js
•   Collection -> Message List
•   Model -> Message
•   Views -> Message, Message List
•   Router -> URL
Model
Collection
Message View
Message list view
Router
Init
Source code
• https://github.com/bytasv/gmail-example
Thank you!

Contenu connexe

Tendances

Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vueDavid Ličen
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkBorisMoore
 
JClouds at San Francisco Java User Group
JClouds at San Francisco Java User GroupJClouds at San Francisco Java User Group
JClouds at San Francisco Java User GroupMarakana Inc.
 
Latvia JUG Monthly Update
Latvia JUG Monthly UpdateLatvia JUG Monthly Update
Latvia JUG Monthly UpdateDmitry Buzdin
 
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...Codecamp Romania
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11virtualsciences41
 
Tampering with JavaScript
Tampering with JavaScriptTampering with JavaScript
Tampering with JavaScriptBoy Baukema
 
Php connectivitywithmysql
Php connectivitywithmysqlPhp connectivitywithmysql
Php connectivitywithmysqlBhumivaghasiya
 
J query presentation
J query presentationJ query presentation
J query presentationakanksha17
 
Budapest New Tech Meetup - node-webkit
Budapest New Tech Meetup - node-webkitBudapest New Tech Meetup - node-webkit
Budapest New Tech Meetup - node-webkitRobert Szaloki
 
Node webkit-meetup
Node webkit-meetupNode webkit-meetup
Node webkit-meetupEU Edge
 
Robe - A brand new robe for Dropwizard
Robe - A brand new robe for DropwizardRobe - A brand new robe for Dropwizard
Robe - A brand new robe for DropwizardSeray Uzgur
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterpriseDave Artz
 
React.js and Flux in details
React.js and Flux in detailsReact.js and Flux in details
React.js and Flux in detailsArtyom Trityak
 
Create a module bundler from scratch
Create a module bundler from scratchCreate a module bundler from scratch
Create a module bundler from scratchSing Ming Chen
 
Azure SQL & SQL Server 2016 JSON
Azure SQL & SQL Server 2016 JSONAzure SQL & SQL Server 2016 JSON
Azure SQL & SQL Server 2016 JSONDavide Mauri
 
Web development using nodejs
Web development using nodejsWeb development using nodejs
Web development using nodejsVaisakh Babu
 

Tendances (20)

Javascript for Wep Apps
Javascript for Wep AppsJavascript for Wep Apps
Javascript for Wep Apps
 
Using NodeJS for Real-Time Web
Using NodeJS for Real-Time WebUsing NodeJS for Real-Time Web
Using NodeJS for Real-Time Web
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
JClouds at San Francisco Java User Group
JClouds at San Francisco Java User GroupJClouds at San Francisco Java User Group
JClouds at San Francisco Java User Group
 
Latvia JUG Monthly Update
Latvia JUG Monthly UpdateLatvia JUG Monthly Update
Latvia JUG Monthly Update
 
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
Vlad Zelinschi - Embrace Native JavaScript (the anti-plugins talk) - Codecamp...
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
 
Nlt 1-terminal-basics
Nlt 1-terminal-basicsNlt 1-terminal-basics
Nlt 1-terminal-basics
 
Tampering with JavaScript
Tampering with JavaScriptTampering with JavaScript
Tampering with JavaScript
 
Php connectivitywithmysql
Php connectivitywithmysqlPhp connectivitywithmysql
Php connectivitywithmysql
 
J query presentation
J query presentationJ query presentation
J query presentation
 
Budapest New Tech Meetup - node-webkit
Budapest New Tech Meetup - node-webkitBudapest New Tech Meetup - node-webkit
Budapest New Tech Meetup - node-webkit
 
Node webkit-meetup
Node webkit-meetupNode webkit-meetup
Node webkit-meetup
 
Robe - A brand new robe for Dropwizard
Robe - A brand new robe for DropwizardRobe - A brand new robe for Dropwizard
Robe - A brand new robe for Dropwizard
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
React.js and Flux in details
React.js and Flux in detailsReact.js and Flux in details
React.js and Flux in details
 
Create a module bundler from scratch
Create a module bundler from scratchCreate a module bundler from scratch
Create a module bundler from scratch
 
Azure SQL & SQL Server 2016 JSON
Azure SQL & SQL Server 2016 JSONAzure SQL & SQL Server 2016 JSON
Azure SQL & SQL Server 2016 JSON
 
Web development using nodejs
Web development using nodejsWeb development using nodejs
Web development using nodejs
 

En vedette

Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...
Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...
Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...Naresh Chintalcheru
 
Functions - complex first class citizen
Functions - complex first class citizenFunctions - complex first class citizen
Functions - complex first class citizenVytautas Butkus
 
PHP Static Code Review
PHP Static Code ReviewPHP Static Code Review
PHP Static Code ReviewDamien Seguy
 
Web UI performance tuning
Web UI performance tuningWeb UI performance tuning
Web UI performance tuningAndy Pemberton
 
Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)Damien Seguy
 
Coding Best practices (PHP)
Coding Best practices (PHP)Coding Best practices (PHP)
Coding Best practices (PHP)Christian Baune
 
Coding Standard And Code Review
Coding Standard And Code ReviewCoding Standard And Code Review
Coding Standard And Code ReviewMilan Vukoje
 
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...Rouven Weßling
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesSiarhei Barysiuk
 
Modern Static Code Analysis in PHP
Modern Static Code Analysis in PHPModern Static Code Analysis in PHP
Modern Static Code Analysis in PHPVladimir Reznichenko
 
Refactoring Legacy Code
Refactoring Legacy CodeRefactoring Legacy Code
Refactoring Legacy CodeAdam Culp
 
Component Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex MoldovanComponent Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex MoldovanITCamp
 
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentSuresh Patidar
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web PerformanceKyle Simpson
 
Code review guidelines
Code review guidelinesCode review guidelines
Code review guidelinesLalit Kale
 
Selenium Architecture
Selenium ArchitectureSelenium Architecture
Selenium Architecturerohitnayak
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingWolfram Nagel
 
PHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding stylePHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding styleBo-Yi Wu
 

En vedette (20)

Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...
Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...
Lie Cheat & Steal to build Hyper-Fast Applications using Event-Driven Archite...
 
Functions - complex first class citizen
Functions - complex first class citizenFunctions - complex first class citizen
Functions - complex first class citizen
 
PHP Static Code Review
PHP Static Code ReviewPHP Static Code Review
PHP Static Code Review
 
Coding standards php
Coding standards phpCoding standards php
Coding standards php
 
Web UI performance tuning
Web UI performance tuningWeb UI performance tuning
Web UI performance tuning
 
Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)Php Code Audits (PHP UK 2010)
Php Code Audits (PHP UK 2010)
 
Coding Best practices (PHP)
Coding Best practices (PHP)Coding Best practices (PHP)
Coding Best practices (PHP)
 
PHP CODING STANDARDS
PHP CODING STANDARDSPHP CODING STANDARDS
PHP CODING STANDARDS
 
Coding Standard And Code Review
Coding Standard And Code ReviewCoding Standard And Code Review
Coding Standard And Code Review
 
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
Modern Static Code Analysis in PHP
Modern Static Code Analysis in PHPModern Static Code Analysis in PHP
Modern Static Code Analysis in PHP
 
Refactoring Legacy Code
Refactoring Legacy CodeRefactoring Legacy Code
Refactoring Legacy Code
 
Component Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex MoldovanComponent Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex Moldovan
 
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web Development
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web Performance
 
Code review guidelines
Code review guidelinesCode review guidelines
Code review guidelines
 
Selenium Architecture
Selenium ArchitectureSelenium Architecture
Selenium Architecture
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-Mapping
 
PHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding stylePHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding style
 

Similaire à Modular & Event driven UI Architecture

J query presentation
J query presentationJ query presentation
J query presentationsawarkar17
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Reviewnetc2012
 
Staying Sane with Drupal (A Develper's Survival Guide)
Staying Sane with Drupal (A Develper's Survival Guide)Staying Sane with Drupal (A Develper's Survival Guide)
Staying Sane with Drupal (A Develper's Survival Guide)Oscar Merida
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSGunnar Hillert
 
WebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsWebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsPop Apps
 
ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015Hossein Zahed
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQueryGill Cleeren
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angularBasarat Syed
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutAndoni Arroyo
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesMark Roden
 
JavaScript!
JavaScript!JavaScript!
JavaScript!RTigger
 
Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)iloveigloo
 
Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JSbrendankowitz
 
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js Client-side MVC with Backbone.js
Client-side MVC with Backbone.js iloveigloo
 
End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012Alexandre Morgaut
 
[Research] azure ml anatomy of a machine learning service - Sharat Chikkerur
[Research] azure ml  anatomy of a machine learning service - Sharat Chikkerur[Research] azure ml  anatomy of a machine learning service - Sharat Chikkerur
[Research] azure ml anatomy of a machine learning service - Sharat ChikkerurPAPIs.io
 
Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO DevsWO Community
 

Similaire à Modular & Event driven UI Architecture (20)

BackboneJS
BackboneJSBackboneJS
BackboneJS
 
J query presentation
J query presentationJ query presentation
J query presentation
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
Staying Sane with Drupal (A Develper's Survival Guide)
Staying Sane with Drupal (A Develper's Survival Guide)Staying Sane with Drupal (A Develper's Survival Guide)
Staying Sane with Drupal (A Develper's Survival Guide)
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
WebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsWebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page Apps
 
ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015
 
Getting started with jQuery
Getting started with jQueryGetting started with jQuery
Getting started with jQuery
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
JavaScript!
JavaScript!JavaScript!
JavaScript!
 
jQuery On Rails
jQuery On RailsjQuery On Rails
jQuery On Rails
 
Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)Client-side MVC with Backbone.js (reloaded)
Client-side MVC with Backbone.js (reloaded)
 
Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JS
 
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
 
End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012
 
[Research] azure ml anatomy of a machine learning service - Sharat Chikkerur
[Research] azure ml  anatomy of a machine learning service - Sharat Chikkerur[Research] azure ml  anatomy of a machine learning service - Sharat Chikkerur
[Research] azure ml anatomy of a machine learning service - Sharat Chikkerur
 
Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO Devs
 

Modular & Event driven UI Architecture