Presentation 1

Full stack Javascript technologies
Web Browser
(AngularJs,Rea
ctJs,Kockout,S
encha)
Web Server
(Node.js)
Database
(Mongo DB)
Debugging was a concern for JS.

ECMA Script compatibility ( ES2015 aka ES6, ES5-2009, ES3-2002 ). Not
all browser supports.Transpile the new ES to old ES
JS is also compiled and interpreted. Because it is not line by line
interpretation.
Even before declaring it can be called.

Eg.
abc();
function abc(){
}
It will not work because is not hoisted.
x();
var x = function() {
}
JS is dynamically typed language.
In JS no block scoping , only functional scoping.
For( var i=0;i<10:i++) {

}
Console.log(i); error
For( let i=0;i<10:i++) {
}
Console.log(i); works with ES6 , it accepts block scoping
Core strength of JS
Functional programming language. ( Lambda expression in JAVA)
( functions are 1st class objects) ES5
Function Employee() { }
Class Employee { } ES 2015
Day 2 session - 1
Modular Programming (Separate out the modules)
AMD Asynchronous model definition
Eg.
<body>
<script>
</script>
scripts loaded sequentially
</body>
odule loaders are already available in ES6
or ES5 manually modules can be loaded using libraries like RequireJS. Helps to
odules asynchronously.
equireJS is an implementer of AMD
setTimeout(fuction() {
----}, 1000;
exectutes after 1000ms
Class Emp { }
Class Mgr extends Emp { }
ES6
Function Emp { }
Function Mgr { }
Mgr.prototype = Object.create(Emp.prototype);
var project = new Object();

Project.name = Phoenix;
Console.log(project.name);
var project = new Object();
project.name = Phoenix;
project.securitylevle = 15;
var field = securitylevel;
Console.log(project[field]);
results in 15
ES5
(OLO
Object
linked
objects)
also object can be created as

var prj = {};
prj.name=Phoenix;
console.log(project.name);
This is called literal style of programming.
var prj = {
name : Phoenix,
securityLevel: 15,
updateDate: function() {
return true;
},
}
var prj = {
tasks: [
{
taskName: first
},
{
}
]
};
console.log(prj.tasks[1].taskName);
Understand Prototypes:
Every JS Object has prototype property
Eg.
var prj = anyObj;
prj.someFun();
prj.someFun();
prj.prototype.someFun();
Prototype chaining:
function Emp() { }; Emp.toString = function() { return Hello;}
function Mgr() {}
Mgr.prototype = Object.create(Emp.prototype);
var mgr1 = new Mgr();
console.log(Mgr typ + ( mgr1 instanceof Emp));
JS Inheritance example
Access prototype as _proto_ in Chrome, FireFox, IE11
var obj = {}
obj.prototype.doSomething = function() { } is not valid
obj.__proto__.doSomething = fucntion() {} is valid due to literal object creatio
Recommend to use literal way to create object
use of prototype but not recommended
Js Patterns
Namespace
MVC
Observer
Modularity
immediately invoked function expression ( IIFE)

eg. (function() {
}) () self invoked
module revealing pattern
Namespace
var MyApp = MyApp || {} return MyApp if it is
already created otherwise create an empty object
sub objects
namespace with generic function
Angular JS
MV*
MVC
MVP
MVVM
controller
view
model
observer pattern
( publish / subscribe)
MVP
view
presenter
model
MVVM Model-View View-Model
view
two way data binding notifies all

the views and vice versa
view
data
binding
mode
l
view
controller
view
model
Observer Pattern
Jquery
DOM Manipulation
DOM Iteration
CrossBrowser Compatibility
Event Handling
Ajax
Rich Internet Application (Jquery UI)
Asynchronous model definition ( model loaders)

ES6 by default has model loaders
src
model
view
controller
model.js
view.js
controller.js
model loaders (AMD)
Main
Tasks
Data
storage
Element
Rendering
RequireJs
Eg.
var module = require(module1);
= require(module2);
import * as from module;
NodeJs
Format
ES6 format
require({dependencyArray}, {callbackFunction});
Dependency injection
require([m1, m2], function(m1,m2){..});
CommonJs Wrapper
define([m1, m2], function(m1,m2){..});
use strict header property

$(# ).on(click.function(){
})
white space separated multiple events can

be passed to on function
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.js"
data-main="src/main.js"
async="async"></script>
// data-main is a HTML5 specification
$(function(){}) returns the function

$({}) empty object for trigger, on etc..
HTML-5
Supports touch events, drag&drop for all platforms like desktop, mobile..etc
Semantic markup
HMTL - 4 div is overused these days - from header to footer
New semantics header, footer, nav, aside, section
Rich set of javascript
webstorage(earlier cookies)[ local storage and session storage ]
local storage data is persisted even on close of browser
session storage data is erased on close of browser
also called as dom storage
geolocation api
messaging apis [XHR-XML Http Request Level-2]
used for ajax calls
PPR-Partial Page Rendering
[Polling has disadvtg of unnecessary calls when there is no new data]
[SSE Server Sent Events]
[WebSockets]
FormData , CLOB, BLOB
Plugin less development
New Javascript APIs
SSE Server Sent Events

Long get
Server hold the request and keep pushing the events from server
and browser get the updates
WebSockets [ New protocol]
Http header : protocol upgrade [ tells the server to switch from http to webso
it became a standard
HTML 5 New Elements

article
aside websites sidebar
audio
video
embed
details
canvas drawing surface,pie charts,
graphs
datalist suggestion dropdowns
figure image , figurecaption-caption
main main content
meter
nav
output
progress
section
time displays the complete format
article
asid
e
Header
canvas
main
article
section
footer
caniuse.com gives information about which version supports

New Javascript APIs
by which browser
Canvas
Contacts
File Api
IndexedDB
modernizr.js verifies the new api supports by the browser

if not render the native javascript code
icrodata eg. data-main used by require.js

essaging
ffline web applications ( App Cache )
eb notification
eb sockets
eb storages
eb workers ( multi threading capability to JS used for long running scripts to load separate
New Input Elements
color, month, number, url, week,

datalist, date, datetime, email,
search, range, time..etc
-
benefits the soft keyboard ( eg. while typing OTP if the input type is number
it shows only the number keyboard )
new validation fields
S3, RWD (Responsive Web Design), Bootstrap
WD how do we target multiple device formats like mobile , desktop, laptop

portrait & landscape mode)
ev starts with mobile first approach
SS -3 gives an option called media queries to decide the width and hieght
Fluid Layout - web is no longer fixed ( % , em, rem are the measurements)
Fluid Content
Media Queries
mobile
tablet
desktop
need to follow adaptive design starting from smallest resolution

smallest (smartphones)
medium (tablets)
large (desktops/laptops)
- css never do rounding
Grid System
Header
img
article
services
Footer
long with media , we can use the target like print layout, magazine layout ..etc
less
css preprocessors
( define css more like programming flavors , mostly used is sas
CSS
sass
div {
p{
element {
}
}
div p element1 { }
div p element2 { }
}
Bootstrap = HTML + CSS + SASS + JQuery
using preprocessors
Bootstrap works on grid model

- it works on 12 column grid
.container or .container-fluid
.row
.col-sm-4
10 11 12
.col-sm-8
when we specify
<div class=container> allows margin and padding
<div class=container-fluid> no margin and padding
visual break points

xs < 768px
sm >= 768px
md >= 992px
lg >= 1200px
eg.
col-sm-8
col-lg-12
along with bootstrap Jquery is essential for events
header
aside
main
footer
aside

Presentation 1

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Presentation 1

Загружено:

Авторское право:

Доступные форматы

Full stack Javascript technologies

Debugging was a concern for JS.

Even before declaring it can be called.

JS is dynamically typed language.

In JS no block scoping , only functional scoping.

For( var i=0;i<10:i++) {

scripts loaded sequentially

odule loaders are already available in ES6

exectutes after 1000ms

var project = new Object();

also object can be created as

Access prototype as _proto_ in Chrome, FireFox, IE11

Recommend to use literal way to create object

use of prototype but not recommended

immediately invoked function expression ( IIFE)

module revealing pattern

namespace with generic function

MVVM Model-View View-Model

two way data binding notifies all

Asynchronous model definition ( model loaders)

model loaders (AMD)

use strict header property

white space separated multiple events can

$(function(){}) returns the function

SSE Server Sent Events

WebSockets [ New protocol]

HTML 5 New Elements

caniuse.com gives information about which version supports

modernizr.js verifies the new api supports by the browser

icrodata eg. data-main used by require.js

New Input Elements

color, month, number, url, week,

S3, RWD (Responsive Web Design), Bootstrap

WD how do we target multiple device formats like mobile , desktop, laptop

ev starts with mobile first approach

need to follow adaptive design starting from smallest resolution

Bootstrap = HTML + CSS + SASS + JQuery

Bootstrap works on grid model

visual break points

along with bootstrap Jquery is essential for events

Вам также может понравиться