User Interface

JAVA SCRIPT
 Javascript is the original name when the language
was developed by Netscape.
 JavaScript is a subset of ECMAScript.JavaScript is
basically ECMAScript at its core but builds upon it.
 JavaScript is a scripting language and it is not java.
 JavaScript is a lightweight, interpreted
programming language.

JAVASCRIPT
 Use in a web browser to display UI.
 JavaScript to generate content on the fly.
 Allows web sites to render only content.

DATA TYPES
 Six data types that are primitives:
 Boolean
 Null
 Undefined
 Number
 String
 Symbol(new in ECMAScript 6)
• More info: http://www.zsoltnagy.eu/es6-symbols-
and-its-use-cases

OBJECT
 Objects are variables too. But objects can contain many values.
 JavaScript objects are containers for named values called
properties or methods.
 e.g. var car = {
type:"Innova",
color:"white",
getName: function(){}
}

ACCESSING OBJECT PROPERTIES
 Access object properties in two ways:
 objectName.propertyName OR
 objectName["propertyName"]
 Accessing Object Methods
 objectName.methodName();
 Assigning value to Object Properties
 objectName.propertyName = “test”
 objectName.propertyName = function(){}.

FUNCTION
 function is defined with the function keyword, followed by
a name, followed by parentheses ().
 e.g. var myFunction = function () {}.
 In ES6 var myFunction = () => {}.
 Function invoke by open and close parentheses ()
 e.g. myFunction();
 In javascript function always return value.
 In javascript function is also an Object.

OPERATORS
 Arithmetic Operators
 + , - , * , * * , / , % , + + , - -
 Assignment Operators
 = , + = , - = , * = , / = , % =
 Comparison Operators
 = = , = = = , ! = , ! = = , > , < , > = , < = , ?
 Logical Operators
 & & , | | , !
 Bitwise Operators
 & , | , ~ , ^ , < < , > > , > > >

SCOPE OF VARIABLES
 In Javascript there is no curly brackets scope.
 e.g. if (true) {
var userName = “test”
}
 Console.log(userName)
 print ‘Test’
 In Javascript there is only function scope.
 e.g. var b = function(){
var userName = "test“
}
 b()
 console.log(userName)
 Uncaught ReferenceError: userName is not defined.

SPA
 A SPA is an application that runs inside a browser (or in a “compatible”
environment) and does not require page reloading during use.
 In a SPA, either all necessary code – HTML, JavaScript, and CSS – is
retrieved with a single page load,or the appropriate resources are
dynamically loaded and added to the page as necessary, usually in
response to user actions.
 in fact, there are many JS frameworks that attempt to offer similar
benefits, like Ember.js, Angular.js, React and so on.

ROUTER
 A critical feature in a SPA is navigation between "pages" within the
application.
 Of course they are not real pages, since it's a Single Page Application,
but from the user point of view it looks like that. ... As this is a Single
Page Application.

TYPE OF SPA?
 Single-page applications can use state
 From an external source (i.e. the URL location) or
 Track state internally.

LOCATION PRIMER
 SPAs use window.location.
 Important properties for an SPA: pathname, hash, and search
(commonly called a query string).

HOW BROWSERS HANDLE
LOCATIONS
 Each browser tab has a “browsing context”. The browsing
context maintains a “session history”, which is basically, an
array of location entries

WHAT DO SPAS DO TO AVOID
THIS?
 History API
 Instead of creating a new Document for every location, the
History API re-uses the active Document, just updating it to
reflect the new location.

HISTORY API HAS THREE
CORE FUNCTIONS
 pushState()
 replaceState()
 go()
 These (and the rest of the API) are accessed via window.history.

REACT
 In computing, React (sometimes styled React.js or ReactJS) is a
JavaScript library for building user interfaces.
 It is maintained by Facebook, Instagram and a community of individual
developers and corporations.
 React allows developers to create large web-applications that use data
and can change over time without reloading the page.

 It aims primarily to provide speed, simplicity, and scalability.
 React processes only user interfaces in applications.
 React is a view layer library, not a framework like Backbone,
Angular etc.

WHAT MAKES REACT DIFFERENT?
 Components, not templates
 Re-render on update
 Virtual DOM (and events)

 Data changing over time is the root of all evil.
 Re-rendering on every change makes things simple.

 React has a virtual DOM.
 Optimized for performance and memory footprint.
 On every update...
 React builds a new virtual DOM subtree.
 diffs it with the old one.
 computes the minimal set of DOM mutations and puts them in a queue.
 and batch executes all updates

WHAT IS COMPONENT ?
 Components are self-contained reusable building blocks of web
application.
 Created using React.createClass()
 The only required method is render()
 Inserted into DOM using React.renderComponent()

JSX
 one of the coolest things in React
 XML-like syntax for generating component's HTML
 Easier to read and understand large DOM trees
 Translates to plain JavaScript using react-tools

 Every Component has “state” and “Props”.
 Rerender the whole app once the state changes.

PROPS
 Passed down to component from parent component and represents
data for the component
 accessed via this.props

STATE
 Represents internal state of the component
 Accessed via this.state
 When a component's state data changes, the rendered markup will be
updated by re-invoking render() method

COMPONENT LIFE CYCLE
 ComponentWillMount: is executed before rendering
 ComponentDidMount: is executed after the first render only
 ComponentWillReceiveProps: is invoked as soon as the props are
updated before another render is called.
 ShouldComponentUpdate: should return true or false value. This will
determine if the component will be updated or not.
 ComponentWillUpdate: is called just before rendering.
 ComponentDidUpdate: is called just after rendering.
 componentWillUnmount is called after the component is unmounted
from the dom.

User Interface

Recommended

More Related Content

What's hot (20)

Similar to User Interface (20)

Recently uploaded (20)

User Interface