The document discusses recent trends in front-end development, including single page applications (SPAs), modern front-end workflows, and the evolution of JavaScript. It covers topics like classes, modules, and static properties in JavaScript. The last section presents an example showing how Date utilities have evolved from basic functions to a class with methods to retrieve the current date in a standardized format.

1. WHAT'S NEW
IN THE FRONT-END DEVELOPMENT NOWADAYS?
KMS TECHNOLOGY VIETNAM
MAY 10TH, 2016
AN LP NGUYEN

2. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
AGENDA
Front-end
Foundations
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution

3. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
FRONT-END FOUNDATIONS
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution

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

5. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
FRONT-END FOUNDATIONS
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution

6. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
SPA - SINGLE PAGE APPLICATION
Modern Front-end Workflow
JavaScript Evolution

7. SPA - SINGLE PAGE APPLICATION
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

8. SPA - SINGLE PAGE APPLICATION
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
WebSocket
History
Animation
Transition
Gradient

9. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
SPA - SINGLE PAGE APPLICATION
Modern Front-end Workflow
JavaScript Evolution

10. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution

11. MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

12. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution

13. MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

14. MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

15. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution

16. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION

17. 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?

18. 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?

19. 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?

20. 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?

21. 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?

22. 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?

23. JAVASCRIPT EVOLUTION
class DateUtil {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

24. JAVASCRIPT EVOLUTION
class DateUtil {
constructor() {
}
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

25. 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?

26. 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?

27. 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() {
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?

28. 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?

29. JAVASCRIPT EVOLUTION
class DateUtil {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

30. JAVASCRIPT EVOLUTION
class DateUtil extends Util {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

31. 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?

32. 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?

33. JAVASCRIPT EVOLUTION
This is only the beginning
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?

34. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION

35. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
TAKEAWAYS
Front-end
Foundations
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution

36. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
IS IT A TREND?

37. WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
Any questions?
Q&A
anlpnguyen@kms-
technology.com
@crashbell

38. THANK YOU
© 2016 KMS Technology