Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 devel...
Road Map
Road Map
▷ Shift from classical to modern web development
▷ Latest trends and technologies involved
▷ Challenges and Solut...
Shift in Web Development
Shift in Web Development
▷ SOA, API and REST based development
▷ Clients, consuming services are growing rapidly
▷ Server ...
Latest Trends and Technologies
Latest Trends and Technologies
▷ Responsive Web Design (RWD)
Support multiple form factors including mobile and tablet bro...
Latest Trends and Technologies (cont.)
▷ CSS3
Animations,Transitions
Gradients
Advanced Selectors and Media Queries
FlexBo...
Challenges and Solutions
Challenges and Solutions
▷ Using best practices
Following time tested design patterns
Code review
Proper and enough Commen...
Challenges and Solutions (cont.)
▷ Hiding the differences in target platform
Platform detection for rendering features
Gra...
JavaScript and CSS let you do anything
(No matter how Stupid)
The point is that we don't have
to do stupid things, just be...
Architectures, Frameworks and Design Patterns
Application Architecture is like a playground for your code. It provides
structures around otherwise unrelated activities
Architecture (JavaScript)
Module
module(n)
1 : a standard or unit of measurement
2 : the size of some one part taken as a unit of measure by which t...
How does this apply to Web Applications?
Any module should be able to live on its own
Web application modules consist of H...
Module Rules
▷ Hands to yourself
Only call your own methods or those on the sandbox.
Don't access DOM elements outside of ...
Sandbox
Modules must stay within their own sandboxes
No matter how restrictive or uncomfortable it may seem
It ensures loose coupling among Modules
(It doesn’t hurt when modules are required to be separated)
Sandbox
▷ It is an interface with which modules can
interact to ensure loose coupling
▷ Modules can rely on the methods to...
Application Core
Application Core
▷ It manages modules
▷ It tells a module when it should initialize
and when it should shutdown
▷ It manag...
Base Library
Base Library
▷ It provides basic functionality
▷ It provide browser normalization
▷ It provides general purpose utilities
...
Architecture (CSS)
Goals of a good CSS Architecture
▷ Predictable
Predictable CSS means our rules behave as we’d expect.
▷...
Popular Architectural Approaches
▷ DRY (Don’t Repeat Yourself) CSS
While coding css don’t repeat a property value pair
▷ O...
Frameworks
▷ MVC
View sits on top of our architecture with controller beside it
Model sit below controller
Views knows abo...
Frameworks (cont.)
Javascript frameworks CSS frameworks
Design Patterns
▷ Patterns
Are proven solutions
Can be easily reused
Can be expressive
▷ Some commonly used design pattern...
Constructor Pattern
Object creation
Constructor Pattern
Basic Constructor
Constructor Pattern
Constructors with prototype
Module Pattern
Self contained module
Module Pattern
import mixins
Module Pattern
Exports
Singleton Pattern
Programming: Best Practices, Dos & Don’ts
JavaScript “Best Practices, Dos & Don’ts”
▷ Make it understandable
▷ Avoid globals
▷ Stick to a strict coding style
▷ Comm...
CSS “Best Practices, Dos & Don’ts”
▷ Always use CSS Resets
▷ Categorize your styles
▷ Follow DRY principle
▷ Avoid using I...
Few things worth mentioning here
before completing the session
“A hammer is an excellent tool but it’s not used for
everything !!!
““The secret of building large apps is never build
large apps. Break your application into small
pieces. Then assemble tho...
““The more tied components are to each other, the
less reusable they will be, and the more difficult it
becomes to make ch...
““The key is to acknowledge from start that you
have no idea how this will grow.
When you accept that you don’t know every...
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web Development
Upcoming SlideShare
Loading in …5
×

Modern UI Architecture_ Trends and Technologies in Web Development

2,022 views

Published on

  • Be the first to comment

Modern UI Architecture_ Trends and Technologies in Web Development

  1. 1. Modern UI Architecture “Latest trends and technologies involved in web development” Suresh Patidar (2nd September 2015)
  2. 2. 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.
  3. 3. Road Map
  4. 4. 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
  5. 5. Shift in Web Development
  6. 6. 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
  7. 7. Latest Trends and Technologies
  8. 8. Latest Trends and Technologies ▷ Responsive Web Design (RWD) Support multiple form factors including mobile and tablet browsers ▷ Web 2.0 Shift 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. ▷ Ajax Architectural shift to support RIA requirements ▷ HTML5 Websocket Webstorage Webworkers Application cache …
  9. 9. Latest Trends and Technologies (cont.) ▷ CSS3 Animations,Transitions Gradients Advanced Selectors and Media Queries FlexBox, Border images and Multiple backgrounds ... ▷ Application testability and Unit Testing TDD BDD ▷ Single Page Application (SPA) Create fluid and responsive Web apps, without constant page reloads
  10. 10. Challenges and Solutions
  11. 11. 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 Experience Personalized experience to users Utilize the analysis/study done by various independent bodies Multilingual Support ▷ The growing size of the code at client side Have 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
  12. 12. Challenges and Solutions (cont.) ▷ Hiding the differences in target platform Platform detection for rendering features Graceful degradation ▷ Selecting right set of Tools and Technologies Have clear visibility on application requirements Consider future requirements and scalability ▷ Performance and Speed Follow asynchronous loading Load only relevant/required information Keep user engaged Use minification, caching and other optimization techniques ▷ Testing, Support and Upgrade
  13. 13. 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.
  14. 14. Architectures, Frameworks and Design Patterns
  15. 15. Application Architecture is like a playground for your code. It provides structures around otherwise unrelated activities
  16. 16. Architecture (JavaScript)
  17. 17. Module module(n) 1 : a standard or unit of measurement 2 : the size of some one part taken as a unit of measure by which the proportions of an architectural composition are regulated 3 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 vehicle 5 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)
  18. 18. 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
  19. 19. 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 take Anything else need ask sandbox ▷ Don’t leave your toys around Don't create global objects ▷ Don’t talk to strangers Don’t directly reference other modules
  20. 20. Sandbox
  21. 21. Modules must stay within their own sandboxes No matter how restrictive or uncomfortable it may seem
  22. 22. It ensures loose coupling among Modules (It doesn’t hurt when modules are required to be separated)
  23. 23. 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
  24. 24. Application Core
  25. 25. 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
  26. 26. Base Library
  27. 27. 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
  28. 28. 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
  29. 29. 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.
  30. 30. 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 ▷ MVP Role 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. ▷ MVVM It 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*
  31. 31. Frameworks (cont.) Javascript frameworks CSS frameworks
  32. 32. 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 ...
  33. 33. Constructor Pattern Object creation
  34. 34. Constructor Pattern Basic Constructor
  35. 35. Constructor Pattern Constructors with prototype
  36. 36. Module Pattern Self contained module
  37. 37. Module Pattern import mixins
  38. 38. Module Pattern Exports
  39. 39. Singleton Pattern
  40. 40. Programming: Best Practices, Dos & Don’ts
  41. 41. 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
  42. 42. 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
  43. 43. Few things worth mentioning here before completing the session
  44. 44. “A hammer is an excellent tool but it’s not used for everything !!!
  45. 45. ““The secret of building large apps is never build large apps. Break your application into small pieces. Then assemble those testable, bite-sized pieces into your big application” -Justin Mayer
  46. 46. ““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
  47. 47. ““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

×