SlideShare a Scribd company logo
FRONTEND ANNO: 2016
Mikael Brevik
BEKK Open Fagdag, 2016
EXPLORATION & ITERATION
Språk Brukergenerert Verktøy
1995
1995
1995
TC39:ECMA-262
1996
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
ECMASCRIPT3
1999
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
ECMASCRIPT3
1999
Steinalderen
Web 1.0 / DHTML
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
ECMASCRIPT3
1999
ECMASCRIPT4
2008
Steinalderen
Web 1.0 / DHTML
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
ECMASCRIPT3
1999
ECMASCRIPT4
2008
Steinalderen
Web 1.0 / DHTML
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
ECMASCRIPT3
1999
ECMASCRIPT4
2008
ECMASCRIPT5
2009
Steinalderen
Web 1.0 / DHTML
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
ECMASCRIPT3
1999
ECMASCRIPT4
2008
ECMASCRIPT5
2009
ECMASCRIPT2015
2015
Steinalderen
Web 1.0 / DHTML
1995
TC39:ECMA-262
1996
ECMASCRIPT1
1997
ECMASCRIPT2
1998
ECMASCRIPT3
1999
ECMASCRIPT4
2008
ECMASCRIPT5
2009
ECMASCRIPT2015
2015
ECMASCRIPT2016
2016
Steinalderen
Web 1.0 / DHTML
1995 19961997 1998 1999 2008 2009 2015 2016
Steinalderen
Web 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016
AJAX2004
Steinalderen
Web 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
Steinalderen
Web 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
Steinalderen
Web 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
Steinalderen
Web 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
MiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
MiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
Node.js
MiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
Node.js,Angular
Ember
2011
Backbone,Knockout.js
2010
MiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
Node.js,Angular
Ember
2011
Backbone,Knockout.js
2010
Industrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
Node.js,Angular
Ember
2011
Backbone,Knockout.js
2010
React
2013
Industrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
Node.js,Angular
Ember
2011
Backbone,Knockout.js
2010
React
2013
Ember2Angular2
Industrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
Node.js,Angular
Ember
2011
Backbone,Knockout.js
2010
React
2013
Ember2Angular2
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 2013
NPM
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 2013
NPM
2012
Bower,Jam.js,Component
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 2013
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
C O N C AT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004 2005 2006 20112010 2013
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
C O N C AT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016
AJAX,Dojo:Modules
2004 2005 2006 20112010 2013
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
C O N C AT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016
AJAX,Dojo:Modules
2004 2005 2006 20112010 2013
AMD
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
C O N C AT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016
AJAX,Dojo:Modules
2004 2005 2006 20112010 2013
AMD,Require.js
Browserify
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
C O N C AT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016
AJAX,Dojo:Modules
2004 2005 2006 20112010 2013
AMD,Require.js
Browserify
System.js
2012
W
ebPack
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
C O N C AT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016
AJAX,Dojo:Modules
2004 2005 2006 20112010 2013
AMD,Require.js
Browserify
System.js,Gulp.js
2012
W
ebPack
Grunt
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
C O N C AT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 20132012
Arbeidet på ES6 starter
→
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 20132012
Traceur
Arbeidet på ES6 starter
→
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 20132012
Traceur
2014
esnext,6to5
Arbeidet på ES6 starter
→
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 20132012
Traceur
2014
esnext,6to5esnext+6to5=babel
Arbeidet på ES6 starter
→
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016
AJAX,DojoToolkit
2004
MooTools,Prototype.js
2005
jQuery
2006
V8
Node.js,Angular
Ember
2011
Backbone,Knockout.js
2010
React
2013
Ember2Angular2
Industrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
Informasjonsalderen
↻
Photo by Tony Webster, flickr@tonywebster.com
En nøktern og konservativ tilnærmingsmåte
Hvordan ser et JavaScript-prosjekt ut i 2016?
0. Ikke alle prosjekter trenger stor klientkode
1. Unngå boilerplates / starter packs
2. Unngå å tro at man trenger et rammeverk
3. Velg et fornuftig abstraksjonsnivå
4. Eksterne avhengigheter fjerner ikke ansvar
Nytt er ikke et argument for bruk. La teknologien stabiliseres
5. Fin demo betyr ikke alltid fin programvare
La behov diktere valg, ikke motsatt.
6. Ikke tenk “Hvorfor ikke” når man kan tenke “Hvorfor”
7. Lær deg plattformen og språket
Photo by cjuneau (https://www.flickr.com/people/15558406@N03) from Ottawa, CANADA
1. Bruk Node.js og NPM*
Hvorfor
Hvorfor?
2. Bruk moduler*
Hvorfor?
3. Ta i bruk transpilering**
Hvorfor?
4. Minifiser i utvikling. Bruk source maps*
Hvorfor?
5. Importer avhengigheter direkte
Hvorfor?
6. Test kode utenfor nettleser*
7. Bruk sunn fornuft og god dømmekraft
La behov diktere valg, ikke motsatt.
Endringsrate
Språkutvikling
→
Endringsrate
Byggesystemer
→
Endringsrate
Rammeverk/biblioteker
→
Endringsrate
?
For kommentarer eller spørsmål.
TWITTER: @MIKAELBREVIK
Gi tilbakemelding på: http://program.bekk.no
BEKK Open Fagdag
BEKK Open Fagdag

More Related Content

Viewers also liked

Kelompok borobudur
Kelompok  borobudurKelompok  borobudur
Kelompok borobudur
SMAN 54 Jakarta
 
places in the City
places in the Cityplaces in the City
places in the City
Monica Reyes
 
Hukum Newton Gravitasi
Hukum Newton GravitasiHukum Newton Gravitasi
Hukum Newton Gravitasi
Mira Pribadi
 
Introduksjon til funksjonell reaktiv programmering
Introduksjon til funksjonell reaktiv programmeringIntroduksjon til funksjonell reaktiv programmering
Introduksjon til funksjonell reaktiv programmering
mikaelbr
 
Hukum Newton Gravitasi
Hukum Newton GravitasiHukum Newton Gravitasi
Hukum Newton Gravitasi
Mira Pribadi
 
Britton Jones Visual Resume
Britton Jones Visual ResumeBritton Jones Visual Resume
Britton Jones Visual Resume
Brit Trees
 
電撃の巨人 by チームモスキート
電撃の巨人 by チームモスキート電撃の巨人 by チームモスキート
電撃の巨人 by チームモスキート
JunOhashi
 
The ISE Controlled Written Exam
The ISE Controlled Written ExamThe ISE Controlled Written Exam
The ISE Controlled Written Exam
Ulises Escarcega-Prieto
 
Cholelithiasis final year mbbs lecture
Cholelithiasis   final year mbbs lectureCholelithiasis   final year mbbs lecture
Cholelithiasis final year mbbs lecture
Mr Adeel Abbas
 
Alwaseet manpower ppt_new[1]
Alwaseet manpower ppt_new[1]Alwaseet manpower ppt_new[1]
Alwaseet manpower ppt_new[1]
alwaseetmanpower
 
Bab i
Bab iBab i
Media product evaluation
Media product evaluationMedia product evaluation
Media product evaluationCharLilyMay
 
Whey gold standard da optimum nutrition
Whey gold standard da optimum nutritionWhey gold standard da optimum nutrition
Whey gold standard da optimum nutrition
Paul Davidson
 
Metabolic nutrition synedrex
Metabolic nutrition synedrexMetabolic nutrition synedrex
Metabolic nutrition synedrex
Paul Davidson
 

Viewers also liked (15)

Kelompok borobudur
Kelompok  borobudurKelompok  borobudur
Kelompok borobudur
 
places in the City
places in the Cityplaces in the City
places in the City
 
Hukum Newton Gravitasi
Hukum Newton GravitasiHukum Newton Gravitasi
Hukum Newton Gravitasi
 
Introduksjon til funksjonell reaktiv programmering
Introduksjon til funksjonell reaktiv programmeringIntroduksjon til funksjonell reaktiv programmering
Introduksjon til funksjonell reaktiv programmering
 
Hukum Newton Gravitasi
Hukum Newton GravitasiHukum Newton Gravitasi
Hukum Newton Gravitasi
 
Britton Jones Visual Resume
Britton Jones Visual ResumeBritton Jones Visual Resume
Britton Jones Visual Resume
 
電撃の巨人 by チームモスキート
電撃の巨人 by チームモスキート電撃の巨人 by チームモスキート
電撃の巨人 by チームモスキート
 
The ISE Controlled Written Exam
The ISE Controlled Written ExamThe ISE Controlled Written Exam
The ISE Controlled Written Exam
 
Cholelithiasis final year mbbs lecture
Cholelithiasis   final year mbbs lectureCholelithiasis   final year mbbs lecture
Cholelithiasis final year mbbs lecture
 
Alwaseet manpower ppt_new[1]
Alwaseet manpower ppt_new[1]Alwaseet manpower ppt_new[1]
Alwaseet manpower ppt_new[1]
 
Bab i
Bab iBab i
Bab i
 
Team 5
Team 5Team 5
Team 5
 
Media product evaluation
Media product evaluationMedia product evaluation
Media product evaluation
 
Whey gold standard da optimum nutrition
Whey gold standard da optimum nutritionWhey gold standard da optimum nutrition
Whey gold standard da optimum nutrition
 
Metabolic nutrition synedrex
Metabolic nutrition synedrexMetabolic nutrition synedrex
Metabolic nutrition synedrex
 

BEKK Open Fagdag