Embed Size (px)
Citation preview
Scalable Application Architectural Design
Decoupled Web Systems
Large Scale Enterprise Applications
Using PureMVC + Enhancements
Before We Go Ahead
Forget how you used to think about web pages and developing websites
Forget jQuery, Closure and any of the other JavaScript Frameworks.
Open up to thinking for a website or web application in a new way.
The only difference between a problem and a solution is that people understand the solution.
- Charles F. Kettering
Think of web app as a Native App
Now Think that you’re going to develop websites using a high level language like C#, Java or ActionScript in a sophisticated environment.
Background in any OOP language will help.
What do I mean by a Native App Native Apps are built using
Components, Objects or Classes organized under packages, folder structure etc. including 3rd party libraries.
Each class instance or object has member variables and methods (Important), and methods act on these variables.
What is an object in a webpage Every TAG is an object. HTML, BODY, DIV, SPAN, IMG etc. these
are all objects. Attributes are member variables eg, id,
style, lang, src etc. Technically speaking I’d not call them as
objects at this point but structures, why? Because they don’t have behaviors or methods that acts on these member variables.
You may say
We can attach behaviors to HTML tags, for instance onload, onclick, onmouseover, onmouseout.
Well still it’s limited to predefined behaviors, we can’t have custom behavior like showMessage=‘’ and besides not an efficient way to define behaviors.
How do we provide Custom Behaviors
Create a JavaScript Class using either “function(), this” or puremvc.define() or goog.provide() and have it mapped and assigned to this html tag.
How a TAG Component looks like? URL
Dedication (~Encapsulation)
Dedication means the members and methods of this class will only act on the assigned tag.
The Tag Component will only focus, manage and manipulate child elements of this tag.
“The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application”
- Justin Meyer
So we can do this…
“The more tied components are to each other, the less reusable they will be, and the more difficult it becomes to make changes to one without accidentally affecting another”
- Rebecca Murphey
PureMVC (GANG OF 4)
What it Provides
Boilerplate code for Testable, Manageable, Reliable, Reusable, Maintainable and Scalable Components based on MVC.
We can change and refactor independently without changing the rest of the system.
The components are highly reusable and can be plugged into any system seamlessly.
In the words of marketing guru John Colanzi, "Sometimes you have to take a step back before you can move forward." As developers mature and their skills increase on the long road to mastery, there are few opportunities to truly leap forward. These special moments are the result of taking calculated risks to step up their game. While using this framework admittedly has a learning curve, can initially increase development time, and requires discipline, you may find it well worth the effort. Evolving from creating custom, per-project frameworks to using the consistent, proven PureMVC framework is one such opportunity to leap forward.
Think BIG
Multilingual Apps
Highly Reusable Code Sharing strategies between languages since modules are separate.
Projects
Implemented several PureMVC ports throughout all Multilingual Projects for major clients of Leo Burnett notably.
McDonalds Phillip Morris General Motors Kellogg’s and more.
PureMVC JS Implementations @ github https://github.com/sshams/Ferrari https://github.com/sshams/DonateMe
Summary
Dedicate a class per tag (of interest) and offer methods for it’s manipulation.
PureMVC JS port with some enhancements based on Real Application Development Environment
Of course using Closure, jQuery or any other framework along with.
Going BIG with Multicore version
