bekk open fagdag
TRANSCRIPT
FRONTEND ANNO: 2016
Mikael Brevik BEKK Open Fagdag, 2016
EXPLORATION & ITERATION
Språk Brukergenerert Verktøy
1995
1995
1995
TC39
: ECM
A-26
2
1996
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
ECM
ASCR
IPT
31999
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
ECM
ASCR
IPT
31999
Steinalderen
Web 1.0 / DHTML
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
ECM
ASCR
IPT
31999
ECM
ASCR
IPT
4
2008
Steinalderen
Web 1.0 / DHTML
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
ECM
ASCR
IPT
31999
ECM
ASCR
IPT
4
2008
Steinalderen
Web 1.0 / DHTML
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
ECM
ASCR
IPT
31999
ECM
ASCR
IPT
4
2008
ECM
ASCR
IPT
5
2009
Steinalderen
Web 1.0 / DHTML
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
ECM
ASCR
IPT
31999
ECM
ASCR
IPT
4
2008
ECM
ASCR
IPT
5
2009
ECM
ASCR
IPT
2015
2015
Steinalderen
Web 1.0 / DHTML
1995
TC39
: ECM
A-26
2
1996
ECM
ASCR
IPT
1
1997
ECM
ASCR
IPT
21998
ECM
ASCR
IPT
31999
ECM
ASCR
IPT
4
2008
ECM
ASCR
IPT
5
2009
ECM
ASCR
IPT
2015
2015
ECM
ASCR
IPT
2016
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 2016AJ
AX2004
SteinalderenWeb 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004
SteinalderenWeb 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
SteinalderenWeb 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
SteinalderenWeb 1.0 / DHTML
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
MiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8
MiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8 Nod
e.js
MiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8 Nod
e.js,
Ang
ular
Embe
r
2011
Back
bone
, Kno
ckou
t.js
2010
MiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8 Nod
e.js,
Ang
ular
Embe
r
2011
Back
bone
, Kno
ckou
t.js
2010
Industrielle revolusjonMiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8 Nod
e.js,
Ang
ular
Embe
r
2011
Back
bone
, Kno
ckou
t.js
2010
Reac
t
2013
Industrielle revolusjonMiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8 Nod
e.js,
Ang
ular
Embe
r
2011
Back
bone
, Kno
ckou
t.js
2010
Reac
t
2013
Embe
r 2An
gula
r 2
Industrielle revolusjonMiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8 Nod
e.js,
Ang
ular
Embe
r
2011
Back
bone
, Kno
ckou
t.js
2010
Reac
t
2013
Embe
r 2An
gula
r 2
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 2013
NPM
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 2013
NPM
2012
Bowe
r, Ja
m.js
, Com
pone
nt
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 20162004 2005 2006 20112010 2013
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
CONCAT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004 2005 2006 20112010 2013
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
CONCAT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo:
Mod
ules
2004 2005 2006 20112010 2013
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
CONCAT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo:
Mod
ules
2004 2005 2006 20112010 2013
AMD
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
CONCAT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo:
Mod
ules
2004 2005 2006 20112010 2013
AMD
, Req
uire
.js
Brow
serif
y
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
CONCAT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
2012
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo:
Mod
ules
2004 2005 2006 20112010 2013
AMD
, Req
uire
.js
Brow
serif
y
Syst
em.js
2012
Web
Pack
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
CONCAT
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo:
Mod
ules
2004 2005 2006 20112010 2013
AMD
, Req
uire
.js
Brow
serif
y
Syst
em.js
, Gul
p.js
2012
Web
Pack
Gru
nt
InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
CONCAT
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
Trac
eur
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
Trac
eur
2014
esne
xt, 6
to5
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
Trac
eur
2014
esne
xt, 6
to5
esne
xt+6
to5=
babe
l
Arbeidet på ES6 starter→InformasjonsalderenIndustrielle revolusjonMiddelalderenSteinalderen
Web 1.0 / DHTML Web 2.0 “Web 3.0”
1995 1996 1999 2008 2009 2015 2016AJ
AX, D
ojo
Tool
kit
2004M
ooTo
ols,
Prot
otyp
e.js
2005
jQue
ry
2006
V8 Nod
e.js,
Ang
ular
Embe
r
2011
Back
bone
, Kno
ckou
t.js
2010
Reac
t
2013
Embe
r 2An
gula
r 2
Industrielle revolusjonMiddelalderenSteinalderenWeb 1.0 / DHTML Web 2.0 “Web 3.0”
Informasjonsalderen
↻
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ømmekraftLa behov diktere valg, ikke motsatt.
End
ring
srat
e
Språkutvikling→
End
ring
srat
e
Byggesystemer→
End
ring
srat
e Rammeverk/biblioteker→
End
ring
srat
e
?
For kommentarer eller spørsmål.
TWITTER: @MIKAELBREVIK
Gi tilbakemelding på: http://program.bekk.no
