What's new in the Front-end development nowadays?

WHAT'S NEWIN THE FRONT-END DEVELOPMENT NOWADAYS?

KMS TECHNOLOGY VIETNAM

MAY 10TH, 2016

AN LP NGUYEN

WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

AGENDA

Front-endFoundations

SPA - Single Page Application

Modern Front-end Workflow

JavaScript Evolution


FRONT-END FOUNDATIONS





SPA - SINGLE PAGE APPLICATION





WebSocketHistory

Animation

Transition

Gradient


MODERN FRONTEND WORKFLOW



JAVASCRIPT EVOLUTION


var today;

var now = new Date();

var days = new Array('Sunday','Monday','Tuesday',

'Wednesday','Thursday','Friday','Saturday');

var months = new Array('January','February','March',

'April','May','June','July','August',

'September','October','November','December');

var date = ((now.getDate()<10) ? "0" : "") + now.getDate();

function fourdigits(number) {

return (number < 1000) ? number + 1900 : number;

}

today = days[now.getDay()] + ", " +

months[now.getMonth()] + " " +

date + ", " +

(fourdigits(now.getYear())) ;

console.log(today); //Tuesday, May 10, 2016



let today;

const now = new Date();

const days = new Array('Sunday','Monday','Tuesday',

'Wednesday','Thursday','Friday','Saturday');

const months = new Array('January','February','March',


'September','October','November','December');

const date = ((now.getDate()<10) ? "0" : "") + now.getDate();


return (number < 1000) ? number + 1900 : number;

}



date + ", " +

(fourdigits(now.getYear())) ;

console.log(today); //Tuesday, May 10, 2016



let today

const now = new Date()

const days = new Array('Sunday','Monday','Tuesday',

'Wednesday','Thursday','Friday','Saturday')

const months = new Array('January','February','March',


'September','October','November','December')

const date = ((now.getDate()<10) ? "0" : "") + now.getDate()


return (number < 1000) ? number + 1900 : number

}



date + ", " +

(fourdigits(now.getYear()))

console.log(today) //Tuesday, May 10, 2016



let today


const days = ['Sunday','Monday','Tuesday',

'Wednesday','Thursday','Friday','Saturday']

const months = ['January','February','March',


'September','October','November','December']




}



date + ", " +

(fourdigits(now.getYear()))




let today










}

const day = days[now.getDay()]

const months = months[now.getMonth()]

const year = fourdigits(now.getYear())

today = day + ", " + month + " " + date + ", " + year




let today










}

const day = days[now.getDay()]

const months = months[now.getMonth()]

const year = fourdigits(now.getYear())

today = `${day}, ${month} ${date}, ${year}`




class DateUtil {

}



class DateUtil {

constructor() {

}

}



class DateUtil {

constructor() {

this.days = ['Sunday','Monday','Tuesday',


this.months = ['January','February','March',



}

}



class DateUtil {

constructor() {






}

fourDigits(number) {


}

getToday() {

}

}


JAVASCRIPT EVOLUTIONclass DateUtil {

constructor() {






}

fourDigits(number) {


}

getToday() {


const date = ((now.getDate()<10) ? "0" : "")+ now.getDate()

const day = this.days[now.getDay()]

const month = this.months[now.getMonth()]

const year = this.fourDigits(now.getYear())

return `${day}, ${month} ${date}, ${year}`

}

}



const dateUtil = new DateUtil()

const today = dateUtil.getToday()




class DateUtil {

}



class DateUtil extends Util {

}




static days = ['Sunday','Monday','Tuesday',


static getToday() {

}

}




static days = ['Sunday','Monday','Tuesday',


static getToday() {

}

}

// A way to use DateUtil

import DateUtil from 'date-util'

const dateUtil = new DateUtil()



This is only the beginning



TAKEAWAYS

Front-endFoundations





IS IT A TREND?


Any questions?

Q&Aanlpnguyen@kms-

technology.com@crashbell

mailto:[email protected]?subject=

What's new in the Front-end development nowadays?

Technology

Transcript of What's new in the Front-end development nowadays?