WHAT'S NEW
IN 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-end
Foundations
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
FRONT-END FOUNDATIONS
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
FRONT-END FOUNDATIONS
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
FRONT-END FOUNDATIONS
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
SPA - SINGLE PAGE APPLICATION
Modern Front-end Workflow
JavaScript Evolution
SPA - SINGLE PAGE APPLICATION
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
SPA - SINGLE PAGE APPLICATION
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
WebSocket
History
Animation
Transition
Gradient
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
SPA - SINGLE PAGE APPLICATION
Modern Front-end Workflow
JavaScript Evolution
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution
MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution
MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
MODERN FRONTEND WORKFLOW
JavaScript Evolution
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION
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?
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?
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?
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?
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?
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?
JAVASCRIPT EVOLUTION
class DateUtil {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION
class DateUtil {
constructor() {
}
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
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?
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?
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?
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?
JAVASCRIPT EVOLUTION
class DateUtil {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION
class DateUtil extends Util {
}
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
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?
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?
JAVASCRIPT EVOLUTION
This is only the beginning
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
JAVASCRIPT EVOLUTION
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
TAKEAWAYS
Front-end
Foundations
SPA - Single Page Application
Modern Front-end Workflow
JavaScript Evolution
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
IS IT A TREND?
WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
Any questions?
Q&A
anlpnguyen@kms-
technology.com
@crashbell
THANK YOU
© 2016 KMS Technology

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

  • 1.
    WHAT'S NEW IN THEFRONT-END DEVELOPMENT NOWADAYS? KMS TECHNOLOGY VIETNAM MAY 10TH, 2016 AN LP NGUYEN
  • 2.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? AGENDA Front-end Foundations SPA - Single Page Application Modern Front-end Workflow JavaScript Evolution
  • 3.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? FRONT-END FOUNDATIONS SPA - Single Page Application Modern Front-end Workflow JavaScript Evolution
  • 4.
    FRONT-END FOUNDATIONS WHAT'S NEWIN THE FRONT-END DEVELOPMENT NOWADAYS?
  • 5.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? FRONT-END FOUNDATIONS SPA - Single Page Application Modern Front-end Workflow JavaScript Evolution
  • 6.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? SPA - SINGLE PAGE APPLICATION Modern Front-end Workflow JavaScript Evolution
  • 7.
    SPA - SINGLEPAGE APPLICATION WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
  • 8.
    SPA - SINGLEPAGE APPLICATION WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS? WebSocket History Animation Transition Gradient
  • 9.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? SPA - SINGLE PAGE APPLICATION Modern Front-end Workflow JavaScript Evolution
  • 10.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? MODERN FRONTEND WORKFLOW JavaScript Evolution
  • 11.
    MODERN FRONTEND WORKFLOW WHAT'SNEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
  • 12.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? MODERN FRONTEND WORKFLOW JavaScript Evolution
  • 13.
    MODERN FRONTEND WORKFLOW WHAT'SNEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
  • 14.
    MODERN FRONTEND WORKFLOW WHAT'SNEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
  • 15.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? MODERN FRONTEND WORKFLOW JavaScript Evolution
  • 16.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? JAVASCRIPT EVOLUTION
  • 17.
    JAVASCRIPT EVOLUTION var today; varnow = 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; constnow = 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 constnow = 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 constnow = 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 constnow = 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 constnow = 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 DateUtilextends Util { } WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
  • 31.
    JAVASCRIPT EVOLUTION class DateUtilextends 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 DateUtilextends 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 isonly the beginning WHAT'S NEW IN THE FRONT-END DEVELOPMENT NOWADAYS?
  • 34.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? JAVASCRIPT EVOLUTION
  • 35.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? TAKEAWAYS Front-end Foundations SPA - Single Page Application Modern Front-end Workflow JavaScript Evolution
  • 36.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? IS IT A TREND?
  • 37.
    WHAT'S NEW INTHE FRONT-END DEVELOPMENT NOWADAYS? Any questions? Q&A anlpnguyen@kms- technology.com @crashbell
  • 38.
    THANK YOU © 2016KMS Technology