what's new in the front-end development nowadays?
TRANSCRIPT
![Page 1: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/1.jpg)
WHAT'S NEWIN THE FRONT-END DEVELOPMENT NOWADAYS?
KMS TECHNOLOGY VIETNAM
MAY 10TH, 2016
AN LP NGUYEN
![Page 2: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/2.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
AGENDA
Front-endFoundations
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
![Page 3: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/3.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
FRONT-END FOUNDATIONS
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
![Page 4: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/4.jpg)
FRONT-END FOUNDATIONS
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 5: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/5.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
FRONT-END FOUNDATIONS
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
![Page 6: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/6.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
SPA - SINGLE PAGE APPLICATION
Modern Front-end Workflow
JavaScript Evolution
![Page 7: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/7.jpg)
SPA - SINGLE PAGE APPLICATION
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 8: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/8.jpg)
SPA - SINGLE PAGE APPLICATION
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
WebSocketHistory
Animation
Transition
Gradient
![Page 9: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/9.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
SPA - SINGLE PAGE APPLICATION
Modern Front-end Workflow
JavaScript Evolution
![Page 10: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/10.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution
![Page 11: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/11.jpg)
MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 12: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/12.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution
![Page 13: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/13.jpg)
MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 14: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/14.jpg)
MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 15: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/15.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution
![Page 16: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/16.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION
![Page 17: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/17.jpg)
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
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 18: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/18.jpg)
JAVASCRIPT EVOLUTION
let today;
const now = new Date();
const days = new Array('Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday');
const months = new Array('January','February','March',
'April','May','June','July','August',
'September','October','November','December');
const 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
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 19: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/19.jpg)
JAVASCRIPT EVOLUTION
let today
const now = new Date()
const days = new Array('Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday')
const months = new Array('January','February','March',
'April','May','June','July','August',
'September','October','November','December')
const 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
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 20: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/20.jpg)
JAVASCRIPT EVOLUTION
let today
const now = new Date()
const days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
const months = ['January','February','March',
'April','May','June','July','August',
'September','October','November','December']
const 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
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 21: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/21.jpg)
JAVASCRIPT EVOLUTION
let today
const now = new Date()
const days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
const months = ['January','February','March',
'April','May','June','July','August',
'September','October','November','December']
const date = ((now.getDate()<10) ? "0" : "") + now.getDate()
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number
}
const day = days[now.getDay()]
const months = months[now.getMonth()]
const year = fourdigits(now.getYear())
today = day + ", " + month + " " + date + ", " + year
console.log(today) //Tuesday, May 10, 2016
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 22: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/22.jpg)
JAVASCRIPT EVOLUTION
let today
const now = new Date()
const days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
const months = ['January','February','March',
'April','May','June','July','August',
'September','October','November','December']
const date = ((now.getDate()<10) ? "0" : "") + now.getDate()
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number
}
const day = days[now.getDay()]
const months = months[now.getMonth()]
const year = fourdigits(now.getYear())
today = `${day}, ${month} ${date}, ${year}`
console.log(today) //Tuesday, May 10, 2016
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 23: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/23.jpg)
JAVASCRIPT EVOLUTION
class DateUtil {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 24: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/24.jpg)
JAVASCRIPT EVOLUTION
class DateUtil {
constructor() {
}
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 25: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/25.jpg)
JAVASCRIPT EVOLUTION
class DateUtil {
constructor() {
this.days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
this.months = ['January','February','March',
'April','May','June','July','August',
'September','October','November','December']
}
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 26: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/26.jpg)
JAVASCRIPT EVOLUTION
class DateUtil {
constructor() {
this.days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
this.months = ['January','February','March',
'April','May','June','July','August',
'September','October','November','December']
}
fourDigits(number) {
return (number < 1000) ? number + 1900 : number
}
getToday() {
}
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 27: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/27.jpg)
JAVASCRIPT EVOLUTIONclass DateUtil {
constructor() {
this.days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
this.months = ['January','February','March',
'April','May','June','July','August',
'September','October','November','December']
}
fourDigits(number) {
return (number < 1000) ? number + 1900 : number
}
getToday() {
const now = new Date()
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}`
}
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 28: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/28.jpg)
JAVASCRIPT EVOLUTION
const dateUtil = new DateUtil()
const today = dateUtil.getToday()
console.log(today) //Tuesday, May 10, 2016
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 29: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/29.jpg)
JAVASCRIPT EVOLUTION
class DateUtil {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 30: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/30.jpg)
JAVASCRIPT EVOLUTION
class DateUtil extends Util {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 31: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/31.jpg)
JAVASCRIPT EVOLUTION
class DateUtil extends Util {
static days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
static getToday() {
}
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 32: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/32.jpg)
JAVASCRIPT EVOLUTION
class DateUtil extends Util {
static days = ['Sunday','Monday','Tuesday',
'Wednesday','Thursday','Friday','Saturday']
static getToday() {
}
}
// A way to use DateUtil
import DateUtil from 'date-util'
const dateUtil = new DateUtil()
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 33: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/33.jpg)
JAVASCRIPT EVOLUTION
This is only the beginning
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
![Page 34: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/34.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION
![Page 35: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/35.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
TAKEAWAYS
Front-endFoundations
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
![Page 36: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/36.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
IS IT A TREND?
![Page 37: What's new in the Front-end development nowadays?](https://reader031.vdocuments.net/reader031/viewer/2022030315/587b5d2f1a28ab38258b4e13/html5/thumbnails/37.jpg)
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
Any questions?
Q&Aanlpnguyen@kms-
technology.com@crashbell