PowerPoint Presentation

Client Side Frameworks Responsive CSSand MV*By Mitesh Gandhi - Metasys Software

AgendaNeed for Responsive Web DesignBootstrapMaterial DesignMaterializeCSS Frameworks CompetitorsNeed for Client-Side Framework

AgendaMV PatternsMVW (Modal-view-whatever)AngularJSReactEmber.JSJS Frameworks Competitors

Need for Responsive Web DesignWeb 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.

Responsive web design(RWD) is awebdevelopment approach that creates dynamic changes to the appearance of awebsite, depending on the screen size and orientation of the device being used to view it.4

BootstrapBootstrap 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, 2011Stable release: 3.3.7 / July 25, 2016Preview release: 4.0.0-alpha.2 / December 8, 2015Written in: HTML, CSS, Less, Sass and JavaScriptLicense: MIT LicenseWebsite: getbootstrap.com

Less is a dynamic style sheet language that can be compiled into CSS and run at client side or server side. Open Source. Originally in Ruby and then in JS. Influenced By Sass.Less provides: variables,nesting,mixins,operatorsandfunctions. Mixins allow embedding all the properties of a class into another classLess allows real-time compilation via less.js by the browser.Sass(SyntacticallyAwesomeStylesheets) is astyle sheet languageSass is ascripting languagethat isinterpretedintoCascading Style Sheets(CSS)The official implementation of Sass isopen-sourceand coded inRuby; however, other implementations exist, includingPHP, and a high-performance implementation inCcalled libSass5

Bootstrap - AdvantagesSpeed of DevelopmentResponsivenessConsistencyCustomizableSupport

Speed of Development- Coding from scratch,cross-browser compatibility and CSS-Less functionality. Ready-made themesResponsiveness- The fluid grid layout that dynamically adjusts to the proper screen resolutionConsistency- Core concept: pairing designers with developers. Ensures consistency regardless of whos working on the projectCustomizable- Bootstrap can be tailor made according to the specifications of your project. Using the Bootstrap customize page. Simply tick off all the features you dont need and your custom version of Bootstrap will be ready for download. Support- Has a huge support community behind it. 11,835 commits; 98,691 stars6

Built with BootstraPDELLApple Maps ConnectNew RelictimeLyWIreRESERVEFLEET GEniUS

https://wire.com/Modern, private communications.https://reserve.com/Reserve is the country's premier hospitality technology platform, helping restaurants and guests connectFLEET GEniUSFleet Management Tool

7

Bootstrap - STATISTIC

Courtesy: http://trends.builtwith.com/

>> quantcast.com - Quantcastis a technology company, founded in 2006, that specializes inaudience measurementand real-time advertising. The company offers public access to traffic and demographic data for millions of Web sites and detailed user insights to digital publishers enrolled in its Quantified Publisher Program. Their data centers process more than 800,000 transactions per second[4]and the company states that it produces accurate audience measurement to over 100 million web destinations.8

Bootstrap - STATISTICCourtesy: http://trends.builtwith.com/

9

Material designMaterial Design is a Googles 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.

10

Material design PrinciplesMaterial is the metaphorThe metaphor of material defines the relationship between space and motion. Bold, graphic, intentionalFundamental design techniques drive the visuals. Typography, grids, space, scale, color and imagery guide the entire designMotion provides meaningMotion allows the user to draw a parallel between what they see on the screen and in real life

Material is the metaphor- The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation.

Bold, graphic, intentional- Fundamental design techniques drive the visuals. Typography, grids, space, scale, color and imagery guide the entire design. Elements live in defined spaces with a clear hierarchy. Color and type choices are bold and deliberate.

Motion provides meaningMotion allows the user to draw a parallel between what they see on the screen and in real life. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.-----Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Give Paper like experience.. Properties and guide lines set by google.; object Must adhere to. All material has x Y and Z dimension. Physical Properties, transmissional and properties of movement. Limitations: Can not passed through each other, can't bend.. Material can be moved: Hori n Verti in z direction.. Data Guideline and How to design icon color scheme, dialogue.>> WEll defined parameters and Guideline>>Intitutive design?? all obje 1 dp ??** Used in Android 5.0 and above11

Material design

>>BrandingiOS uses Skeuomorph design. contains shadows, degree and object details. It is very heavy.>> User Engagement35 % of the Smart-Phone APPS are used just once in the life time of the user who installed the APP.Trello integrated the material design and received 42% more activity per session.>> BETTER UI/UXMaterial Design has responsive&meaningful>> Cost Effective- Just One prototype design can be used for web, mobile, and APP. This reduce the overhead cost of designer, and ux developer for multiple platforms. It offers lot of free resource available such as icon, color pallets, templates and wire frames.12

MaterializeMaterialize is among the first few web frameworks that offer css and components built as per Google material design guidelinesCreation of students from Carnegie Mellon UniversityInitial release: Nov., 2014Current release: 0.97.7 beta release on Jul. 23, 2016Written in: HTML, CSS, Sass, JavaScript and RubyLicense: MIT LicenseWebsite: http://materializecss.com/

13

Materialize - AdvantagesSlick material design offered out-of-the-boxSpeeds up developmentBetter animations and transitions for a better user experienceWell detailed documentation

14

Built with Materialize

EMERALD

RDX SPORTS

Android Kiosk

Rochester Hills Public Library

Talk Fusion

15

Materialize - STATISTICCourtesy: http://trends.builtwith.com/

- Googles Material Design Lite (MDL) Entire Net (3550 Imple)16

Materialize - STATISTICCourtesy: http://trends.builtwith.com/

17

CSS Frameworks - CompetitorsFoundationFoundation, 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 UISemantic-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.

- Foundation for sites, Email and Apps. For apps it helps to build complex layout, interactions and animations.18

CSS Frameworks - CompetitorsMaterial UIMaterial UI is a CSS Framework that makes use of React components to implement the material design philosophy.MilligramIt 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.

- Googles Material Design Lite (MDL) Entire Net (3550 Imple)

19

Need for Client-side frameworkHUGE 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.

Grid lists users, Active and Disable users count per page?? 10 active users, 2 banned users"?If, however, youre building an application that still relies on the server for most of the heavy-lifting of Views/pages and youre just using a little JavaScript or jQuery to make things a little more interactive, an MV framework may be overkill.1. Your application needs an asynchronous connection to the backend2. Your application has functionality that shouldnt result in a full page reload (i.e. adding a comment to a post, infinite scrolling)3. Much of the viewing or manipulation of data will be within the browser rather than on the server4. The same data is being rendered in different ways on the page5. Your application has many trivial interactions that modify data (buttons, switches)

20

MV Patterns

Each pattern creates testable,maintainable and reusable application components, however,there are differences that suit each approach to specific types of developer tooling.All these patterns forces a separation of concerns, it means domain model and controller logic are decoupled from user interface (view). As a result maintenance and testing of the application become simpler and easier.softwarearchitectural pattern. MVC originally developed for desktop computing, First time web Apples WebObject and then WebObject Ported to Java. Java Spring now ASP.NET MVC and Express.Backbone.JS:- MVP. Active and Passive. Not to use in smaller projects.MVVM:- WPF and Silverlight. Knockout.JSMVVM facilitates aseparationof development of thegraphical user interface be it via amarkup languageor GUI code from development of thebusiness logicorback-endlogic (thedata model).The Model-View-ViewModel is a pattern for separating concerns in technologies that use data-binding.

21

MVW (Modal-view-whatever)

22

AngularjsAngularJS is a structural framework for dynamic web apps.Maintained by Google and by a community of individuals and corporations.Frontend part of the MEAN stackFollows MVW design paradigmInitial release: October20, 2010Stable release: 1.5.7 / June15, 2016Preview release: 2.0.0 RC4 / June30, 2016Written in: Typescript, JavaScriptLicense: MIT LicenseWebsite: www.angularjs.org, angular.io

TypeScript is just a tool to be used at coding-time to improve the quality of your JavaScript and make it more readable and maintainable.TypeScriptis afree and open sourceprogramming language developed and maintained byMicrosoft. Oct. 2012

MEANis afree and open-sourceJavaScriptsoftware stackfor buildingdynamic web sitesandweb applications.[1]

MongoDB, aNoSQLdatabaseExpress.js, aweb application frameworkthat runs on Node.jsAngular.js, a JavaScriptMVCframework that runs in browser JavaScript enginesNode.js, an execution environment forevent-drivenserver-side and networking applications

23

Angularjs - AdvantagesTwo-Way Data BindingGreat for Single-Page ApplicationTemplating with HTMLDirectivesDependency Injection

SPA: a more fluid user experience similar to a desktop application. all necessary code HTML,JavaScript, andCSS is retrieved with a single page load or dynamically loaded.Templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser. (Directive, Markup, Filter, Form controls)AngularJS directives are extended HTML attributes with the prefixng- (ng-app, ng-init, ng-model). Directives are markers on a DOM element that tell AngularJS'sHTML compiler($compile) to attach a specified behavior to that DOM element.Dependency injection separates the creation of a client's dependencies from the client's behavior, which allows program designs to belooselycoupled[7]and to follow thedependency inversionandsingle responsibility principles.[4][8]. One of the major advantages of dependency injection is that it can make testing lots easier.24

Built with AngularJSYouTube on PS3

iTunes Connect

MSNBC

Weather.com

Goodfilms

jetBlue

https://builtwith.angularjs.org/project/YouTube-on-PS3

https://www.madewithangular.com25

angularJS - STATISTICCourtesy: http://trends.builtwith.com/

26

angularJS - STATISTICCourtesy: http://trends.builtwith.com/

27

ReactReact 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, 2013Stable release: 15.1.0 / May20, 2016Written in: JavaScriptLicense: 3-Clause BSD with Facebook addendumWebsite: http://facebook.github.io/react

No reciprocity:new BSD, MIT. These licenses simply grant permission to copy the software, and disclaim warranty. The BSD License allows proprietary use and allows the software released under the license to be incorporated into proprietary products.The BSD 3-clause license allows you almost unlimited freedom with the software so long as you include the BSD copyright and license notice in it (found in Fulltext).>> Do whatever you want! Just dont sue me (MIT). BSD 3: MIT + Dont use my name in promotion without asking me.28

React - AdvantagesExtremely EfficientBuild Composable ComponentsAwesome for SEOOut-of-the-box Developer ToolsEasy to Test

it is easy to test, and you can also integrate some tools like jest.>>Ext. Efficient: creates its own virtual DOM where your components actually live. This approach gives you enormous flexibility and amazing gain in performance. React.js also calculates what are the changes needed to be made in DOM. This process of React.js avoids expensive DOM operations and make updates in a very cient manner.>> Comp. Comp: TL;DR: Make a bunch of components that work together in a flexible way. Deals with inter-relationships of components.https://speakerdeck.com/blesh/emberjs-designing-composable-components>> Awesome for SEO: One of the biggest issues with JavaScript frameworks is that they are not exactly search engine friendly. Although there have been some improvements in this area, search engines generally have trouble reading JavaScript-heavy applications. React.js stands out from the crowd because you can run React.js on the server, and the virtual DOM will be rendered and returned to the browser as a regular web page. No need for PhantomJS and other tricks!>> Dev Tools: officialReact.js chrome extension. It makes debugging your app so much easier. After you install the extension, you'll have a direct look into the virtual DOM just as if you were browsing a regular DOM tree in the elements panel. Pretty amazing!29

Built with REACTFacebook

Instagram

Flipkart

IMDb

NETFLIX

WhatsApp Web

30

REACT - STATISTICCourtesy: http://trends.builtwith.com/

31

REACT - STATISTICCourtesy: http://trends.builtwith.com/

32

EmberEmber.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 paradigmInitial release: 8December 2011Stable release: 2.6.0 / June8, 2016Written in: JavaScriptLicense: MIT LicenseWebsite: http://emberjs.com/

Yehuda Katz Member of jQuery and Ruby on Rail

33

Ember - AdvantagesBuilt-in Best PracticesCoherent Dev ToolingSmooth MigrationThe Core Team

Built-in Best Practices. Convention over configurationCoherent Dev Tooling CLI, Build (Broccoli), Ember Inspector (explore any Ember app) and Add-OnThe Core Team Involved in Real Time Production Application.

34

Built with EMBERNASA

Persopo - Public Records Search

Ally

Bustle

ibotta

The Scene

https://travis-ci.com/35

EMBER - STATISTICCourtesy: http://trends.builtwith.com/

36

EMBER - STATISTICCourtesy: http://trends.builtwith.com/

37

Client-side Frameworks - CompetitorsBackbone.JSBackbone.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.KnockoutKnockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.

Backbone MVP - Jeremy Ashkenas Also developed Underscore.JS and CoffeeScriptKnockout MVVM - Steve Sanderson Microsoft Employee

38

Thank you