Soumettre la recherche
Mettre en ligne
MVC pattern for widgets
•
4 j'aime
•
3,492 vues
Behnam Taraghi
Suivre
describes the MVC architechture used in widget development for PLE
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 13
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
JavaScript Library Overview
JavaScript Library Overview
jeresig
State of jQuery '08
State of jQuery '08
jeresig
jQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
jeresig
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
jeresig
Starting with jQuery
Starting with jQuery
Anil Kumar
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko
JavaScript Library Overview
JavaScript Library Overview
jeresig
Recommandé
JavaScript Library Overview
JavaScript Library Overview
jeresig
State of jQuery '08
State of jQuery '08
jeresig
jQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
jeresig
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
jeresig
Starting with jQuery
Starting with jQuery
Anil Kumar
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko
JavaScript Library Overview
JavaScript Library Overview
jeresig
Introduction to jQuery
Introduction to jQuery
Nagaraju Sangam
WebApps e Frameworks Javascript
WebApps e Frameworks Javascript
meet2Brains
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
Roberto Messora
Pengenalan AngularJS
Pengenalan AngularJS
Edi Santoso
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
React django
React django
Heber Silva
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2
Filippo Matteo Riggio
Sane Async Patterns
Sane Async Patterns
TrevorBurnham
The jQuery Library
The jQuery Library
LearnNowOnline
Reactive Type-safe WebComponents
Reactive Type-safe WebComponents
Martin Hochel
End-to-end testing with geb
End-to-end testing with geb
Jesús L. Domínguez Muriel
The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015
Matt Raible
Clean Javascript
Clean Javascript
Ryunosuke SATO
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalCampDN
jQuery Introduction
jQuery Introduction
Arwid Bancewicz
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
Peter-Paul Koch
FuncUnit
FuncUnit
Brian Moschel
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz
IndexedDB - Querying and Performance
IndexedDB - Querying and Performance
Parashuram N
Basic Tutorial of React for Programmers
Basic Tutorial of React for Programmers
David Rodenas
Javascript frameworks: Backbone.js
Javascript frameworks: Backbone.js
Soós Gábor
Bringing the light to the client with KnockoutJS
Bringing the light to the client with KnockoutJS
Boyan Mihaylov
Contenu connexe
Tendances
Introduction to jQuery
Introduction to jQuery
Nagaraju Sangam
WebApps e Frameworks Javascript
WebApps e Frameworks Javascript
meet2Brains
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
Roberto Messora
Pengenalan AngularJS
Pengenalan AngularJS
Edi Santoso
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
React django
React django
Heber Silva
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2
Filippo Matteo Riggio
Sane Async Patterns
Sane Async Patterns
TrevorBurnham
The jQuery Library
The jQuery Library
LearnNowOnline
Reactive Type-safe WebComponents
Reactive Type-safe WebComponents
Martin Hochel
End-to-end testing with geb
End-to-end testing with geb
Jesús L. Domínguez Muriel
The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015
Matt Raible
Clean Javascript
Clean Javascript
Ryunosuke SATO
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalCampDN
jQuery Introduction
jQuery Introduction
Arwid Bancewicz
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
Peter-Paul Koch
FuncUnit
FuncUnit
Brian Moschel
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz
IndexedDB - Querying and Performance
IndexedDB - Querying and Performance
Parashuram N
Basic Tutorial of React for Programmers
Basic Tutorial of React for Programmers
David Rodenas
Tendances
(20)
Introduction to jQuery
Introduction to jQuery
WebApps e Frameworks Javascript
WebApps e Frameworks Javascript
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
Pengenalan AngularJS
Pengenalan AngularJS
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
React django
React django
Mobile App Development: Primi passi con NativeScript e Angular 2
Mobile App Development: Primi passi con NativeScript e Angular 2
Sane Async Patterns
Sane Async Patterns
The jQuery Library
The jQuery Library
Reactive Type-safe WebComponents
Reactive Type-safe WebComponents
End-to-end testing with geb
End-to-end testing with geb
The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015
Clean Javascript
Clean Javascript
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
jQuery Introduction
jQuery Introduction
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
FuncUnit
FuncUnit
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
IndexedDB - Querying and Performance
IndexedDB - Querying and Performance
Basic Tutorial of React for Programmers
Basic Tutorial of React for Programmers
Similaire à MVC pattern for widgets
Javascript frameworks: Backbone.js
Javascript frameworks: Backbone.js
Soós Gábor
Bringing the light to the client with KnockoutJS
Bringing the light to the client with KnockoutJS
Boyan Mihaylov
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
jonknapp
Backbone js
Backbone js
Knoldus Inc.
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
Juliana Lucena
jquery summit presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
DivyanshGupta922023
Android development with Scala and SBT
Android development with Scala and SBT
Anton Yalyshev
ASP .net MVC
ASP .net MVC
Divya Sharma
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
Ron Reiter
MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009
Jonas Follesø
Integration Testing With ScalaTest and MongoDB
Integration Testing With ScalaTest and MongoDB
Michal Bigos
Jinal desai .net
Jinal desai .net
rohitkumar1987in
Use Eclipse technologies to build a modern embedded IDE
Use Eclipse technologies to build a modern embedded IDE
Benjamin Cabé
MVC on the server and on the client
MVC on the server and on the client
Sebastiano Armeli
Effective JavaFX architecture with FxObjects
Effective JavaFX architecture with FxObjects
Srikanth Shenoy
Viking academy backbone.js
Viking academy backbone.js
Bert Wijnants
Jsf presentation
Jsf presentation
Ashish Gupta
Rp 6 session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
sapientindia
1. Mini seminar intro
1. Mini seminar intro
Leonid Maslov
Osiąganie mądrej architektury z Symfony2
Osiąganie mądrej architektury z Symfony2
3camp
Similaire à MVC pattern for widgets
(20)
Javascript frameworks: Backbone.js
Javascript frameworks: Backbone.js
Bringing the light to the client with KnockoutJS
Bringing the light to the client with KnockoutJS
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
Backbone js
Backbone js
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
jquery summit presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
Android development with Scala and SBT
Android development with Scala and SBT
ASP .net MVC
ASP .net MVC
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009
Integration Testing With ScalaTest and MongoDB
Integration Testing With ScalaTest and MongoDB
Jinal desai .net
Jinal desai .net
Use Eclipse technologies to build a modern embedded IDE
Use Eclipse technologies to build a modern embedded IDE
MVC on the server and on the client
MVC on the server and on the client
Effective JavaFX architecture with FxObjects
Effective JavaFX architecture with FxObjects
Viking academy backbone.js
Viking academy backbone.js
Jsf presentation
Jsf presentation
Rp 6 session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
1. Mini seminar intro
1. Mini seminar intro
Osiąganie mądrej architektury z Symfony2
Osiąganie mądrej architektury z Symfony2
Dernier
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
AndikSusilo4
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Dernier
(20)
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
MVC pattern for widgets
1.
2.
Building a good Application
Maintainable Extensible Scalable Backend Simple Responsive Elegant Frontend Robust Performance
3.
Building a good JavaScript
Application (RIA) Maintainable Extensible Scalable Backend Simple Responsive Elegant Frontend Robust Browser Performance Compatibility
4.
Module Architecture Modular programming is a software design technique that increases the extent to which software is composed from separate parts, called modules. Conceptually, modules represent a separation of concerns, and improve maintainability by enforcing logical boundaries between components.
Source: Wikipedia
5.
Module Architecture in RIA A part of web application
Independent unit of functionality Modules know nothing about the others Lives on its own Sandbox, talks to other modules Loose coupling Refactoring one module does not affect the others
6.
Loose vs. Strong coupling Strong coupling occurs when a dependent class contains a pointer directly to a concrete class which provides the required behavior. Loose coupling occurs when the dependent class contains a pointer only to an interface, which can then be implemented by one or many concrete classes.
Loose coupling provides extensibility to designs. A new concrete class can easily be added later that implements that same interface without ever having to modify and recompile the dependent class. Strong coupling does not allow this. Sandbox Source: Wikipedia
7.
Sandbox
Includes Public Area (Interface) of the modules Interface depends on private members (non accessible area) Module Communication channel
8.
MVC Pattern Based on Module Architecture
Controller Model View
9.
MVC Pattern
Controller Interface Interface Interface Model View
10.
MVC in JavaScript Private areas
Sandboxes var ModelModule = (function () { var ControllerModule = (function var ViewModule = (function (Model, View) { (Controller, $) { var interFace = { setName: _setName, var interFace = { var interFace = { getName: _getName retrieveName: _retrieveName, init: _init, }, }, }, _name = '', _retrieveName = function() { _init = function() { _setName = function(name) { return Model.getName(); $ _name = name; }, ("div#name").click(function() { }, _init = function() { var name = _getName = function() { Model.setName('Herbert'); Controller.retrieveName(); return _name; View.init(); $(this).html(name); }; }; }); }; _init(); return interFace; return interFace; return interFace; }()); }(ModelModule, ViewModule)); }(ControllerModule, jQuery));
11.
Notices Controller controls every thing, initializes other modules Controller has normally the largest sandbox Controller talks with Model and View View talks ONLY with Controller (event handling) Model talks with NO modules NEVER use global objects, put them in sandbox instead NEVER create global objects, Do not forget “var” Interactions with HTML is done ONLY in View Consider Coding standard
12.
How to start? Start with the View! How should the widget look like? Draw it out using different mockup tools Set the events. What should happen after event is fired? Do you need data to feed into the DOM? Set Controller interface Create the Model, which objects are needed? Set Model interface, usually setters and getters Write CSS + HTML code in index.html to test out your View Populate the Model with fake data Set a View interface to test your View with fake data
13.
Widget Design
View mockup (HTML + CSS + JS code) Model Controller Messages: Array of string PostMassag() Links: Array of string showMessages() Files: Array of objects showLinks() File.name ………. File.size …. Events: array of objects Event.date Event.place Event handling in View … $(“#post”).click = function() { var m=$(“input”).value(); SaveEvent() Conteroller.postMessage(m); getEvent() } setLinks() …. …… Source: http://mockupstogo.net/rich‐internet‐application‐sample‐2
Télécharger maintenant