bekk open fagdag

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

↻

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ø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