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.

Client Side Frameworks

  • Login to see the comments

  • Be the first to like this

Client Side Frameworks

  1. 1. CLIENT SIDE FRAMEWORKS RESPONSIVE CSS AND MV* By Mitesh Gandhi - Metasys Software
  2. 2. AGENDA Need for Responsive Web Design Bootstrap Material Design Materialize CSS Frameworks – Competitors Need for Client-Side Framework
  3. 3. AGENDA MV Patterns MVW (Modal-view-whatever) AngularJS React Ember.JS JS Frameworks – Competitors
  4. 4. NEED FOR RESPONSIVE WEB DESIGN  Web pages can be viewed using many different devices: desktops, laptops, tablets, and phones.  Web page should look good, and be easy to use, regardless of the device.
  5. 5. BOOTSTRAP  Bootstrap is a free and open-source front-end web framework for designing websites and web applications.  Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools.  Initial release: August 19, 2011  Stable release: 3.3.7 / July 25, 2016  Preview release: 4.0.0-alpha.2 / December 8, 2015  Written in: HTML, CSS, Less, Sass and JavaScript  License: MIT License  Website: getbootstrap.com
  6. 6. BOOTSTRAP - ADVANTAGES  Speed of Development  Responsiveness  Consistency  Customizable  Support
  7. 7. BUILT WITH BOOTSTRAP  DELL  Apple Maps Connect  New Relic  timeLy  WIre  RESERVE  FLEET GEniUS
  8. 8. BOOTSTRAP - STATISTIC Courtesy: http://trends.builtwith.com/
  9. 9. BOOTSTRAP - STATISTIC Courtesy: http://trends.builtwith.com/
  10. 10. MATERIAL DESIGN  Material Design is a Google’s conceptual design philosophy that outlines how apps should look and work on mobile devices.  It breaks down everything — such as animation, style, layout — and gives guidance on patterns, components and usability.  Material starts with mobile but extends to any other device.  Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference.
  11. 11. MATERIAL DESIGN PRINCIPLES Material is the metaphor The metaphor of material defines the relationship between space and motion. Bold, graphic, intentional Fundamental design techniques drive the visuals. Typography, grids, space, scale, color and imagery guide the entire design Motion provides meaning Motion allows the user to draw a parallel between what they see on the screen and in real life
  12. 12. MATERIAL DESIGN
  13. 13. MATERIALIZE  Materialize is among the first few web frameworks that offer css and components built as per Google material design guidelines  Creation of students from Carnegie Mellon University  Initial release: Nov., 2014  Current release: 0.97.7 beta release on Jul. 23, 2016  Written in: HTML, CSS, Sass, JavaScript and Ruby  License: MIT License  Website: http://materializecss.com/
  14. 14. MATERIALIZE - ADVANTAGES  Slick material design offered out-of-the-box  Speeds up development  Better animations and transitions for a better user experience  Well detailed documentation
  15. 15. BUILT WITH MATERIALIZE  EMERALD  RDX SPORTS  Android Kiosk  Rochester Hills Public Library  Talk Fusion
  16. 16. MATERIALIZE - STATISTIC Courtesy: http://trends.builtwith.com/
  17. 17. MATERIALIZE - STATISTIC Courtesy: http://trends.builtwith.com/
  18. 18. CSS FRAMEWORKS - COMPETITORS  Foundation Foundation, from Zurb, is a very popular front-end framework and was the first ever open-source web framework to support responsive design and the first to be Mobile First.  Semantic UI Semantic-UI is the new kid on the block. This is another framework that gives tough competition to the likes of Bootstrap and Foundation. The adoption and support for this framework is increasing at a faster pace.
  19. 19. CSS FRAMEWORKS - COMPETITORS  Material UI Material UI is a CSS Framework that makes use of React components to implement the material design philosophy.  Milligram It is one of the most minimalistic CSS frameworks on the internet. When gzipped, it is just 2kb in size. You get almost everything which is needed to start a project from scratch — Typography, Buttons, Lists, Styled forms, Tables and Grids.
  20. 20. NEED FOR CLIENT-SIDE FRAMEWORK  HUGE file with lots of functions and callbacks and logic for weaving everything together.  DOM manipulation logic is intermingled with ajax requests/response handling code.  You add dynamic HTML to your code in the same place, perhaps with or without a templating solution.  The need of Client-Side JavaScript Frameworks is clear when you start operate not only with HTML but with data on your page.
  21. 21. MV PATTERNS
  22. 22. MVW (MODAL-VIEW-WHATEVER)
  23. 23. ANGULARJS  AngularJS is a structural framework for dynamic web apps.  Maintained by Google and by a community of individuals and corporations.  Frontend part of the MEAN stack  Follows MVW design paradigm  Initial release: October 20, 2010  Stable release: 1.5.7 / June 15, 2016  Preview release: 2.0.0 RC4 / June 30, 2016  Written in: Typescript, JavaScript  License: MIT License  Website: www.angularjs.org, angular.io
  24. 24. ANGULARJS - ADVANTAGES Two-Way Data Binding Great for Single-Page Application Templating with HTML Directives Dependency Injection
  25. 25. BUILT WITH ANGULARJS  YouTube on PS3  iTunes Connect  MSNBC  Weather.com  Goodfilms  jetBlue
  26. 26. ANGULARJS - STATISTIC Courtesy: http://trends.builtwith.com/
  27. 27. ANGULARJS - STATISTIC Courtesy: http://trends.builtwith.com/
  28. 28. REACT  React is an open-source JavaScript library providing a view for data rendered as HTML.  Maintained by Facebook, Instagram and by a community of individuals and corporations.  Initial release: March, 2013  Stable release: 15.1.0 / May 20, 2016  Written in: JavaScript  License: 3-Clause BSD with Facebook addendum  Website: http://facebook.github.io/react
  29. 29. REACT - ADVANTAGES Extremely Efficient Build Composable Components Awesome for SEO Out-of-the-box Developer Tools Easy to Test
  30. 30. BUILT WITH REACT  Facebook  Instagram  Flipkart  IMDb  NETFLIX  WhatsApp Web
  31. 31. REACT - STATISTIC Courtesy: http://trends.builtwith.com/
  32. 32. REACT - STATISTIC Courtesy: http://trends.builtwith.com/
  33. 33. EMBER  Ember.js is an open-source JavaScript framework allows developers to create web applications.  Created by Yehuda Katz and maintained by team of developers.  Follows MVC design paradigm  Initial release: 8 December 2011  Stable release: 2.6.0 / June 8, 2016  Written in: JavaScript  License: MIT License  Website: http://emberjs.com/
  34. 34. EMBER - ADVANTAGES Built-in Best Practices Coherent Dev Tooling Smooth Migration The Core Team
  35. 35. BUILT WITH EMBER  NASA  Persopo - Public Records Search  Ally  Bustle  ibotta  The Scene
  36. 36. EMBER - STATISTIC Courtesy: http://trends.builtwith.com/
  37. 37. EMBER - STATISTIC Courtesy: http://trends.builtwith.com/
  38. 38. CLIENT-SIDE FRAMEWORKS - COMPETITORS  Backbone.JS Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.  Knockout Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
  39. 39. THANK YOU

×