Modern UI Architecture “Latest trends and technologies involved in web development” Suresh Patidar (2nd September 2015)
Modern UI Architecture“Latest trends and technologies involved in web development”
Suresh Patidar(2nd September 2015)
Hello!I am Suresh Patidar
An Engineering Graduate (B.E.) in Computer Science
Have 9+ years of experience in product development using multiple technologies.
Passionate about Architectures, Design Patterns, UI technologies and User Experience.
Road Map
▷ Shift from classical to modern web development
▷ Latest trends and technologies involved
▷ Challenges and Solutions of a modern web development
▷ Architecture, Frameworks and Design patterns available
▷ Coding Best Practices, Dos & Don’ts for client side
development using JavaScript & CSS
▷ Open House
Shift in Web Development
▷ SOA, API and REST based development
▷ Clients, consuming services are growing rapidly
▷ Server side vs Client side views
▷ Client playing vital role by taking more responsibility
▷ High performance apps with low bandwidth utilization
▷ Server Side implementations are becoming a thin layer
Latest Trends and Technologies▷ Responsive Web Design (RWD)
Support multiple form factors including mobile and tablet browsers
▷ Web 2.0Shift from expert generated content to user generated contents
▷ Rich Interactive Applications (RIA)Shift from Static web apps to more interactive, desktop like web sites to simplify
consumer creation of contents.
▷ AjaxArchitectural shift to support RIA requirements
▷ HTML5Websocket
Webstorage
Webworkers
Application cache
…
Latest Trends and Technologies (cont.)▷ CSS3
Animations,Transitions
Gradients
Advanced Selectors and Media Queries
FlexBox, Border images and Multiple backgrounds
...
▷ Application testability and Unit TestingTDD
BDD
▷ Single Page Application (SPA)Create fluid and responsive Web apps, without constant page reloads
Challenges and Solutions▷ Using best practices
Following time tested design patterns
Code review
Proper and enough Commenting & Logging
Discourage suppressing errors and corner cutting in development
Have clear distinction between process improvement vs process discarding
▷ The User ExperiencePersonalized experience to users
Utilize the analysis/study done by various independent bodies
Multilingual Support
▷ The growing size of the code at client sideHave good architecture for client side
Write code in modular fashion. Encourage reusability and loose coupling
Have clear separation of concerns
Follow “Don’t Repeat Yourself” (DRY) approach to programming
Challenges and Solutions (cont.)▷ Hiding the differences in target platform
Platform detection for rendering features
Graceful degradation
▷ Selecting right set of Tools and TechnologiesHave clear visibility on application requirements
Consider future requirements and scalability
▷ Performance and SpeedFollow asynchronous loading
Load only relevant/required information
Keep user engaged
Use minification, caching and other optimization techniques
▷ Testing, Support and Upgrade
JavaScript and CSS let you do anything(No matter how Stupid)
The point is that we don't have
to do stupid things, just because
we can.
Application Architecture is like a playground for your code. It provides structures around otherwise unrelated activities
Modulemodule(n)1 : a standard or unit of measurement2 : the size of some one part taken as a unit of measure by which the proportions of an architectural composition are regulated3 a : any in a series of standardized units for use together: as (1) : a unit of furniture or architecture (2) : an educational unit which covers a single subject or topic b : a usually packaged functional assembly of electronic components for use with other such assemblies
4 : an independently operable unit that is a part of the total structure of a space vehicle5 a : a subset of an additive group that is also a group under addition b : a mathematical set that is a commutative group under addition and that is closed under multiplication which is distributive from the left or right or both by elements of a ring and for which a(bx) = (ab)x or (xb)a = x(ba) or both where a and b are elements of the ring and x belongs to the set
(Source: Merriam-Webster Dictionary)
How does this apply to Web Applications?
Any module should be able to live on its own
Web application modules consist of HTML + CSS + JavaScript
Each module's job is to create a meaningful user experience
web application module (n)
1 : an independent unit of functionality that is part of the total structure of a web application
Module Rules▷ Hands to yourself
Only call your own methods or those on the sandbox.
Don't access DOM elements outside of your box
Don’t access non native global objects
▷ Ask, don’t takeAnything else need ask sandbox
▷ Don’t leave your toys aroundDon't create global objects
▷ Don’t talk to strangersDon’t directly reference other modules
Sandbox
▷ It is an interface with which modules can
interact to ensure loose coupling
▷ Modules can rely on the methods to always
be there
▷ It acts like a security guard know what the
modules are allowed to access and do not on
the framework
▷ Take time to design correct sandbox
interface as it cannot change later
Application Core
▷ It manages modules
▷ It tells a module when it should initialize
and when it should shutdown
▷ It manages communication between
module
▷ It handles errors. Uses available
information to determine best course of
action
▷ It should be extensible
Base Library
▷ It provides basic functionality
▷ It provide browser normalization
▷ It provides general purpose utilities
Ajax communication, Xml and Json Parsing
etc.
▷ It provide low level extensibility
▷ Only the base library knows which browser
is being used
Architecture (CSS)Goals of a good CSS Architecture
▷ Predictable
Predictable CSS means our rules behave as we’d expect.
▷ Reusable
CSS rules should be abstract and decoupled enough that we
can build new components quickly from existing parts
without having to recode patterns and problems we’ve
already solved
▷ Maintainable
Adding new features shouldn’t require refactoring existing
CSS
▷ Scable
Scalable CSS means it can be easily managed by a single
person or a large engineering team
Popular Architectural Approaches
▷ DRY (Don’t Repeat Yourself) CSS
While coding css don’t repeat a property value pair
▷ OOCSS (Object Oriented CSS)
Separate structure and presentation
Separate container and content
▷ SMACSS (Scalable and Modular Architecture for CSS
It is about identifying patterns in design and codifying them.
Its core is categorization of CSS in Base, Layout, Module, State and
Theme.
Frameworks▷ MVC
View sits on top of our architecture with controller beside it
Model sit below controller
Views knows about controller and controller knows about models
View have direct access to models
▷ MVPRole of controller is replaced with presenter
Presenter sits at the same level as views, listening to events from both the
View and model and mediating the actions between them.
▷ MVVMIt allows us to create View-specific subsets of a Model which can contain
state and logic information, avoiding the need to expose the entire
Model to a View.
▷ MV*
Design Patterns▷ Patterns
Are proven solutions
Can be easily reused
Can be expressive
▷ Some commonly used design patterns
Constructor Pattern
Module Pattern
Singleton pattern
Observer pattern
Mediator pattern
Facade pattern
...
JavaScript “Best Practices, Dos & Don’ts”
▷ Make it understandable
▷ Avoid globals
▷ Stick to a strict coding style
▷ Comment as much as needed but not
more
▷ Avoid mixing with other technologies
▷ Use shortcut notations
▷ Modularize
▷ Enhance progressively
▷ Allow for configuration and
translation
▷ Avoid heavy nesting
▷ Optimize loops
▷ Keep DOM access to a minimum
▷ Add functionality with JavaScript,
not content
▷ Build on the shoulders of giants
▷ Development code is not live code
CSS “Best Practices, Dos & Don’ts”
▷ Always use CSS Resets
▷ Categorize your styles
▷ Follow DRY principle
▷ Avoid using ID based selectors
▷ Avoid inline styles
▷ Avoid using “!important”
▷ Define classes with meaningful names
▷ Classes should not be used for any
purpose other than styling.
▷ Avoid using large chain of selectors
▷ Avoid specifying tag names in
Classes
▷ Follow consistent naming
convention
▷ Separate structure and
presentation
““The secret of building large apps is never build large apps. Break your application into smallpieces. Then assemble those testable, bite-sized pieces into your big application”
-Justin Mayer
““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
““The key is to acknowledge from start that you have no idea how this will grow.When you accept that you don’t know everything you begin to design the system defensively”
-Nicholas Zakas