SlideShare una empresa de Scribd logo
1 de 38
Descargar para leer sin conexión
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

Más contenido relacionado

Destacado

Présentation spring data Matthieu Briend
Présentation spring data  Matthieu BriendPrésentation spring data  Matthieu Briend
Présentation spring data Matthieu BriendSOAT
 
Technology Trends and Big Data in 2013-2014
Technology Trends and Big Data in 2013-2014Technology Trends and Big Data in 2013-2014
Technology Trends and Big Data in 2013-2014KMS Technology
 
JavaScript No longer A “toy” Language
JavaScript No longer A “toy” LanguageJavaScript No longer A “toy” Language
JavaScript No longer A “toy” LanguageKMS Technology
 
Technology Application Development Trends For IT Students
Technology Application Development Trends For IT StudentsTechnology Application Development Trends For IT Students
Technology Application Development Trends For IT StudentsKMS Technology
 
Technology Trends 2013-2014 at HUI
Technology Trends 2013-2014 at HUITechnology Trends 2013-2014 at HUI
Technology Trends 2013-2014 at HUIKMS Technology
 
KMS story and How Vietnam to export software outsourcing services or build so...
KMS story and How Vietnam to export software outsourcing services or build so...KMS story and How Vietnam to export software outsourcing services or build so...
KMS story and How Vietnam to export software outsourcing services or build so...KMS Technology
 
Cross platform mobile development with Corona
Cross platform mobile development with CoronaCross platform mobile development with Corona
Cross platform mobile development with CoronaKMS Technology
 
Caching and IPC with Redis
Caching and IPC with RedisCaching and IPC with Redis
Caching and IPC with RedisKMS Technology
 
Git - Boost Your DEV Team Speed and Productivity
Git - Boost Your DEV Team Speed and ProductivityGit - Boost Your DEV Team Speed and Productivity
Git - Boost Your DEV Team Speed and ProductivityKMS Technology
 
About KMS Technology - Updated on July 2013
About KMS Technology - Updated on July 2013About KMS Technology - Updated on July 2013
About KMS Technology - Updated on July 2013KMS Technology
 
Increase Chances to Be Hired as Software Developers - 2014
Increase Chances to Be Hired as Software Developers - 2014Increase Chances to Be Hired as Software Developers - 2014
Increase Chances to Be Hired as Software Developers - 2014KMS Technology
 
Contributors for Delivering a Successful Testing Project Seminar
Contributors for Delivering a Successful Testing Project SeminarContributors for Delivering a Successful Testing Project Seminar
Contributors for Delivering a Successful Testing Project SeminarKMS Technology
 
Mobile Development Career
Mobile Development CareerMobile Development Career
Mobile Development CareerKMS Technology
 
Developing Apps for Windows Phone 8
Developing Apps for Windows Phone 8Developing Apps for Windows Phone 8
Developing Apps for Windows Phone 8KMS Technology
 
Big Data Overview 2013-2014
Big Data Overview 2013-2014Big Data Overview 2013-2014
Big Data Overview 2013-2014KMS Technology
 
Cross Platform Mobile Development with C# and Xamarin
Cross Platform Mobile Development with C# and XamarinCross Platform Mobile Development with C# and Xamarin
Cross Platform Mobile Development with C# and XamarinKMS Technology
 
Become Software Tester or Developer
Become Software Tester or DeveloperBecome Software Tester or Developer
Become Software Tester or DeveloperKMS Technology
 

Destacado (19)

Présentation spring data Matthieu Briend
Présentation spring data  Matthieu BriendPrésentation spring data  Matthieu Briend
Présentation spring data Matthieu Briend
 
Technology Trends and Big Data in 2013-2014
Technology Trends and Big Data in 2013-2014Technology Trends and Big Data in 2013-2014
Technology Trends and Big Data in 2013-2014
 
JavaScript No longer A “toy” Language
JavaScript No longer A “toy” LanguageJavaScript No longer A “toy” Language
JavaScript No longer A “toy” Language
 
Technology Application Development Trends For IT Students
Technology Application Development Trends For IT StudentsTechnology Application Development Trends For IT Students
Technology Application Development Trends For IT Students
 
Technology Trends 2013-2014 at HUI
Technology Trends 2013-2014 at HUITechnology Trends 2013-2014 at HUI
Technology Trends 2013-2014 at HUI
 
KMS' Stories
KMS' StoriesKMS' Stories
KMS' Stories
 
KMS story and How Vietnam to export software outsourcing services or build so...
KMS story and How Vietnam to export software outsourcing services or build so...KMS story and How Vietnam to export software outsourcing services or build so...
KMS story and How Vietnam to export software outsourcing services or build so...
 
Cross platform mobile development with Corona
Cross platform mobile development with CoronaCross platform mobile development with Corona
Cross platform mobile development with Corona
 
Caching and IPC with Redis
Caching and IPC with RedisCaching and IPC with Redis
Caching and IPC with Redis
 
Git - Boost Your DEV Team Speed and Productivity
Git - Boost Your DEV Team Speed and ProductivityGit - Boost Your DEV Team Speed and Productivity
Git - Boost Your DEV Team Speed and Productivity
 
About KMS Technology - Updated on July 2013
About KMS Technology - Updated on July 2013About KMS Technology - Updated on July 2013
About KMS Technology - Updated on July 2013
 
Amazon web services
Amazon web servicesAmazon web services
Amazon web services
 
Increase Chances to Be Hired as Software Developers - 2014
Increase Chances to Be Hired as Software Developers - 2014Increase Chances to Be Hired as Software Developers - 2014
Increase Chances to Be Hired as Software Developers - 2014
 
Contributors for Delivering a Successful Testing Project Seminar
Contributors for Delivering a Successful Testing Project SeminarContributors for Delivering a Successful Testing Project Seminar
Contributors for Delivering a Successful Testing Project Seminar
 
Mobile Development Career
Mobile Development CareerMobile Development Career
Mobile Development Career
 
Developing Apps for Windows Phone 8
Developing Apps for Windows Phone 8Developing Apps for Windows Phone 8
Developing Apps for Windows Phone 8
 
Big Data Overview 2013-2014
Big Data Overview 2013-2014Big Data Overview 2013-2014
Big Data Overview 2013-2014
 
Cross Platform Mobile Development with C# and Xamarin
Cross Platform Mobile Development with C# and XamarinCross Platform Mobile Development with C# and Xamarin
Cross Platform Mobile Development with C# and Xamarin
 
Become Software Tester or Developer
Become Software Tester or DeveloperBecome Software Tester or Developer
Become Software Tester or Developer
 

Más de KMS Technology

A journey to a Full Stack Tester
A journey to a Full Stack Tester A journey to a Full Stack Tester
A journey to a Full Stack Tester KMS Technology
 
React & Redux, how to scale?
React & Redux, how to scale?React & Redux, how to scale?
React & Redux, how to scale?KMS Technology
 
Common design principles and design patterns in automation testing
Common design principles and design patterns in automation testingCommon design principles and design patterns in automation testing
Common design principles and design patterns in automation testingKMS Technology
 
AWS: Scaling With Elastic Beanstalk
AWS: Scaling With Elastic BeanstalkAWS: Scaling With Elastic Beanstalk
AWS: Scaling With Elastic BeanstalkKMS Technology
 
Behavior-Driven Development and Automation Testing Using Cucumber Framework W...
Behavior-Driven Development and Automation Testing Using Cucumber Framework W...Behavior-Driven Development and Automation Testing Using Cucumber Framework W...
Behavior-Driven Development and Automation Testing Using Cucumber Framework W...KMS Technology
 
Behavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberBehavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberKMS Technology
 
Cross-platform Mobile Development with C# and Xamarin Webinar
Cross-platform Mobile Development with C# and Xamarin WebinarCross-platform Mobile Development with C# and Xamarin Webinar
Cross-platform Mobile Development with C# and Xamarin WebinarKMS Technology
 
Software Testing Process & Trend
Software Testing Process & TrendSoftware Testing Process & Trend
Software Testing Process & TrendKMS Technology
 
Software Technology Trends
Software Technology TrendsSoftware Technology Trends
Software Technology TrendsKMS Technology
 
Framework For Automation Testing Practice Sharing
Framework For Automation Testing Practice SharingFramework For Automation Testing Practice Sharing
Framework For Automation Testing Practice SharingKMS Technology
 

Más de KMS Technology (12)

A journey to a Full Stack Tester
A journey to a Full Stack Tester A journey to a Full Stack Tester
A journey to a Full Stack Tester
 
React & Redux, how to scale?
React & Redux, how to scale?React & Redux, how to scale?
React & Redux, how to scale?
 
Sexy React Stack
Sexy React StackSexy React Stack
Sexy React Stack
 
Common design principles and design patterns in automation testing
Common design principles and design patterns in automation testingCommon design principles and design patterns in automation testing
Common design principles and design patterns in automation testing
 
AWS: Scaling With Elastic Beanstalk
AWS: Scaling With Elastic BeanstalkAWS: Scaling With Elastic Beanstalk
AWS: Scaling With Elastic Beanstalk
 
Behavior-Driven Development and Automation Testing Using Cucumber Framework W...
Behavior-Driven Development and Automation Testing Using Cucumber Framework W...Behavior-Driven Development and Automation Testing Using Cucumber Framework W...
Behavior-Driven Development and Automation Testing Using Cucumber Framework W...
 
KMS Introduction
KMS IntroductionKMS Introduction
KMS Introduction
 
Behavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberBehavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using Cucumber
 
Cross-platform Mobile Development with C# and Xamarin Webinar
Cross-platform Mobile Development with C# and Xamarin WebinarCross-platform Mobile Development with C# and Xamarin Webinar
Cross-platform Mobile Development with C# and Xamarin Webinar
 
Software Testing Process & Trend
Software Testing Process & TrendSoftware Testing Process & Trend
Software Testing Process & Trend
 
Software Technology Trends
Software Technology TrendsSoftware Technology Trends
Software Technology Trends
 
Framework For Automation Testing Practice Sharing
Framework For Automation Testing Practice SharingFramework For Automation Testing Practice Sharing
Framework For Automation Testing Practice Sharing
 

Último

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 

Último (20)

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 

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

  • 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