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. 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. BOOTSTRAP - ADVANTAGES
Speed of Development
Responsiveness
Consistency
Customizable
Support
7. BUILT WITH BOOTSTRAP
DELL
Apple Maps Connect
New Relic
timeLy
WIre
RESERVE
FLEET GEniUS
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. 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
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. 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. BUILT WITH MATERIALIZE
EMERALD
RDX SPORTS
Android Kiosk
Rochester Hills Public Library
Talk Fusion
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. 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. 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.
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. ANGULARJS - ADVANTAGES
Two-Way Data Binding
Great for Single-Page Application
Templating with HTML
Directives
Dependency Injection
25. BUILT WITH ANGULARJS
YouTube on PS3
iTunes Connect
MSNBC
Weather.com
Goodfilms
jetBlue
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. REACT - ADVANTAGES
Extremely Efficient
Build Composable Components
Awesome for SEO
Out-of-the-box Developer Tools
Easy to Test
30. BUILT WITH REACT
Facebook
Instagram
Flipkart
IMDb
NETFLIX
WhatsApp Web
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/
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.
Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.
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, operators and functions. Mixins allow embedding all the properties of a class into another class
Less allows real-time compilation via less.js by the browser.
Sass (Syntactically Awesome Stylesheets) is a style sheet language
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS)
The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass
Speed of Development
- Coding from scratch,cross-browser compatibility and CSS-Less functionality. Ready-made themes
Responsiveness
- The fluid grid layout that dynamically adjusts to the proper screen resolution
Consistency
- Core concept: pairing designers with developers. Ensures consistency regardless of who’s working on the project
Customizable
- Bootstrap can be tailor made according to the specifications of your project. Using the Bootstrap customize page. Simply tick off all the features you don’t 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 stars
https://wire.com/
Modern, private communications.
https://reserve.com/
Reserve is the country's premier hospitality technology platform, helping restaurants and guests connect
FLEET GEniUS
Fleet Management Tool
>> quantcast.com - Quantcast is a technology company, founded in 2006, that specializes in audience measurement and 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.
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 meaning
Motion 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 above
>>Branding
iOS uses Skeuomorph design. contains shadows, degree and object details. It is very heavy.
>> User Engagement
35 % 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/UX
Material 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.
- Google’s Material Design Lite (MDL) Entire Net (3550 Imple)
- Foundation for sites, Email and Apps. For apps it helps to build complex layout, interactions and animations.
- Google’s Material Design Lite (MDL) Entire Net (3550 Imple)
Grid lists users, Active and Disable users count per page?? 10 active users, 2 banned users"?
If, however, you’re building an application that still relies on the server for most of the heavy-lifting of Views/pages and you’re 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 backend
2. Your application has functionality that shouldn’t 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 server
4. The same data is being rendered in different ways on the page
5. Your application has many trivial interactions that modify data (buttons, switches)
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.
software architectural 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.JS
MVVM facilitates a separation of development of the graphical user interface – be it via a markup language or GUI code – from development of the business logic or back-end logic (the data model). The Model-View-ViewModel is a pattern for separating concerns in technologies that use data-binding.
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.
TypeScript is a free and open source programming language developed and maintained by Microsoft. Oct. 2012
MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications.[1]
MongoDB, a NoSQL database
Express.js, a web application framework that runs on Node.js
Angular.js, a JavaScript MVC framework that runs in browser JavaScript engines
Node.js, an execution environment for event-driven server-side and networking applications
SPA: a more fluid user experience similar to a desktop application. all necessary code – HTML, JavaScript, and CSS – 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 prefix ng- (ng-app, ng-init, ng-model). Directives are markers on a DOM element that tell AngularJS's HTML 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 be loosely coupled[7] and to follow the dependency inversion and single responsibility principles.[4][8]. One of the major advantages of dependency injection is that it can make testing lots easier.
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 don’t sue me (MIT). BSD 3: MIT + Don’t use my name in promotion without asking me.
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: official React.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!
Yehuda Katz – Member of jQuery and Ruby on Rail
Built-in Best Practices. – Convention over configuration
Coherent Dev Tooling – CLI, Build (Broccoli), Ember Inspector (explore any Ember app) and Add-On
The Core Team – Involved in Real Time Production Application.
https://travis-ci.com/
Backbone – MVP - Jeremy Ashkenas – Also developed Underscore.JS and CoffeeScript
Knockout – MVVM - Steve Sanderson – Microsoft Employee
