AKTUELLE REVOLUTIONEN IN DER

FRONTEND-ENTWICKLUNG

KOMPONENTENBASIERTE

FRONTEND-ENTWICKLUNG

KOMPONENTENBASIERTE

FRONTEND-ENTWICKLUNG

Christian Reichel

studiert Mensch-Computer Interaktion

an der Uni Hamburg

Werkstudent bei eparo GmbH

Themen: Interaktionsdesign, Visuelle

Gestaltung, Webentwicklung, UX

DAS BIN ICH

GLIEDERUNG

1. Ich hol’ euch dann mal ab!

1. Was ist HTML?

2. Was ist CSS?

2. Das Problem: Riesen Projekte

3. Die Lösung: Precompiling

4. Tools

5. Die Struktur: Atomic Design Advanced

WAS IST

HTML?

WAS IST HTML?

WAS IST HTML?

WAS IST HTML?

WAS IST HTML?

WAS IST HTML?

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis

exquisitaque doctrina philosophi Graeco sermone tractavissent,

ea Latinis litteris mandaremus, fore ut hic noster labor in varias

reprehensiones incurreret. nam quibusdam, et iis quidem non

admodum indoctis, totum hoc displicet philosophari. quidam

autem non tam id reprehendunt, si remissius agatur, sed tantum

studium tamque multam operam ponendam in eo non arbitrantur.

erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes

Latinas, qui se dicant in Graecis legendis operam malle

consumere. postremo aliquos futuros suspicor, qui me ad alias

litteras vocent, genus hoc scribendi, etsi sit elegans, personae

tamen et dignitatis esse negent.

Contra quos omnis dicendum breviter existimo. Quamquam

philosophiae quidem vituperatoribus satis responsum est eo

libro, quo a nobis philosophia defensa et collaudata est, cum

esset accusata et vituperata ab Hortensio. qui liber cum et tibi

probatus videretur et iis, quos ego posse iudicare arbitrarer, plura

suscepi veritus ne movere hominum studia viderer, retinere non

posse. Qui autem, si maxime hoc placeat, moderatius tamen id

volunt fieri, difficilem quandam temperantiam postulant in eo,

quod semel admissum coerceri reprimique non potest, ut

propemodum iustioribus utamur illis, qui omnino avocent a

philosophia, quam his, qui rebus infinitis modum constituant in

reque eo meliore, quo maior sit, mediocritatem desiderent.

WAS IST HTML?

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis

exquisitaque doctrina philosophi Graeco sermone tractavissent,

ea Latinis litteris mandaremus, fore ut hic noster labor in varias

reprehensiones incurreret. nam quibusdam, et iis quidem non

admodum indoctis, totum hoc displicet philosophari. quidam

autem non tam id reprehendunt, si remissius agatur, sed tantum

studium tamque multam operam ponendam in eo non arbitrantur.

erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes

Latinas, qui se dicant in Graecis legendis operam malle

consumere. postremo aliquos futuros suspicor, qui me ad alias

litteras vocent, genus hoc scribendi, etsi sit elegans, personae

tamen et dignitatis esse negent.

Contra quos omnis dicendum breviter existimo. Quamquam

philosophiae quidem vituperatoribus satis responsum est eo

libro, quo a nobis philosophia defensa et collaudata est, cum

esset accusata et vituperata ab Hortensio. qui liber cum et tibi

probatus videretur et iis, quos ego posse iudicare arbitrarer, plura

suscepi veritus ne movere hominum studia viderer, retinere non

posse. Qui autem, si maxime hoc placeat, moderatius tamen id

volunt fieri, difficilem quandam temperantiam postulant in eo,

quod semel admissum coerceri reprimique non potest, ut

propemodum iustioribus utamur illis, qui omnino avocent a

philosophia, quam his, qui rebus infinitis modum constituant in

reque eo meliore, quo maior sit, mediocritatem desiderent.

WAS IST HTML?

Rumpf

Anfang

Ende

WAS IST HTML?

<p>

</p>

Warum sollte man sich

diesen Vortrag als User

Experience Experte oder

Interaktionsdesigner

antun? Ganz einfach:

Interdisziplinarität

rockt!

WAS IST

CSS ?

WAS IST CSS?

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis

exquisitaque doctrina philosophi Graeco sermone tractavissent,

ea Latinis litteris mandaremus, fore ut hic noster labor in varias

reprehensiones incurreret. nam quibusdam, et iis quidem non

admodum indoctis, totum hoc displicet philosophari. quidam

autem non tam id reprehendunt, si remissius agatur, sed tantum

studium tamque multam operam ponendam in eo non arbitrantur.

erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes

Latinas, qui se dicant in Graecis legendis operam malle

consumere. postremo aliquos futuros suspicor, qui me ad alias

litteras vocent, genus hoc scribendi, etsi sit elegans, personae

tamen et dignitatis esse negent.

Contra quos omnis dicendum breviter existimo. Quamquam

philosophiae quidem vituperatoribus satis responsum est eo

libro, quo a nobis philosophia defensa et collaudata est, cum

esset accusata et vituperata ab Hortensio. qui liber cum et tibi

probatus videretur et iis, quos ego posse iudicare arbitrarer, plura

suscepi veritus ne movere hominum studia viderer, retinere non

posse. Qui autem, si maxime hoc placeat, moderatius tamen id

volunt fieri, difficilem quandam temperantiam postulant in eo,

quod semel admissum coerceri reprimique non potest, ut

propemodum iustioribus utamur illis, qui omnino avocent a

philosophia, quam his, qui rebus infinitis modum constituant in

reque eo meliore, quo maior sit, mediocritatem desiderent.

WAS IST CSS?

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco

sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias

reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc

displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum

studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi

Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle

consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc

scribendi, etsi sit elegans, personae tamen et dignitatis esse negent.

Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus

satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset

accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse

iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse.

Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam

temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut

propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus

infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.

WAS IST CSS?

Headline 1

Non eram nescius, Brute,

cum, quae summis ingeniis

exquisitaque doctrina

philosophi Graeco sermone

tractavissent, ea Latinis litteris

mandaremus, fore ut hic

noster labor in varias

reprehensiones incurreret.

nam quibusdam, et iis quidem

non admodum indoctis, totum

hoc displicet philosophari.

quidam autem non tam id

reprehendunt, si remissius

agatur, sed tantum studium

tamque multam operam

ponendam in eo non

arbitrantur. erunt etiam, et ii

quidem eruditi Graecis litteris,

contemnentes Latinas, qui se

dicant in Graecis legendis

operam malle consumere.

postremo aliquos futuros

suspicor, qui me ad alias

litteras vocent, genus hoc

scribendi, etsi sit elegans,

WAS IST CSS?

Eigenschaften

Selektoren

WAS IST CSS?

p

color: rgb(85, 85, 85);

font-family: Gafata, sans-serif;

font-size: 18px;

{

}

DAS PROBLEM:

RIESEN PROJEKTE

WO IST DAS PROBLEM?

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

HTML CSS

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

HTML

Rumpf

Anfang

Ende

Eigenschaften

Selektoren

CSS

WO IST DAS PROBLEM?

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

HTML CSS

Rumpf

Anfang

Ende

Eigenschaften

Selektoren

Selektoren

Rumpf

Anfang

Ende

WO IST DAS PROBLEM?

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

HTML CSS Datei 1

Rumpf

Anfang

Ende

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

WO IST DAS PROBLEM?

CSS Datei 2

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

HTML CSS Datei 1

Rumpf

Anfang

Ende

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

WO IST DAS PROBLEM?

CSS Datei 2

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque

doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris

mandaremus, fore ut hic noster labor in varias reprehensiones incurreret.

nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet

philosophari. quidam autem non tam id reprehendunt, si remissius agatur,

sed tantum studium tamque multam operam ponendam in eo non

arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes

Latinas, qui se dicant in Graecis legendis operam malle consumere.

postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus

hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent.

Contra quos omnis dicendum breviter existimo. Quamquam philosophiae

quidem vituperatoribus satis responsum est eo libro, quo a nobis

philosophia defensa et collaudata est, cum esset accusata et vituperata

ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego

posse iudicare arbitrarer, plura suscepi veritus ne movere hominum

studia viderer, retinere non posse. Qui autem, si maxime hoc placeat,

moderatius tamen id volunt fieri, difficilem quandam temperantiam

postulant in eo, quod semel admissum coerceri reprimique non potest, ut

propemodum iustioribus utamur illis, qui omnino avocent a philosophia,

quam his, qui rebus infinitis modum constituant in reque eo meliore, quo

maior sit, mediocritatem desiderent.

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

HTML CSS Datei 1

Rumpf

Anfang

Ende

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

WO IST DAS PROBLEM?

CSS Datei 2

Eigenschaften

Selektoren

Rumpf

Anfang

HTML CSS Datei 1

Rumpf

Anfang

Ende

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Rumpf

Anfang

Ende

WO IST DAS PROBLEM?

CSS Datei 2

Wolf Brüning: Large Scale Interaction Pattern Library (UX Roundtable, Oktober 2013)http://uxhh.de/roundtable/archiv/index.html#Okt13

DIE LÖSUNG:

PRECOMPILING

ÜBERSETZEN

100101010101

010101010101

010110100101

000101010010

101011010010

100010101000

101

…

HTML-Datei

CSS-Datei

Browser

ÜBERSETZEN

100101010101

010101010101

010110100101

000101010010

101011010010

100010101000

101

…

HTML-Datei

CSS-Datei

BrowserCOMPILER

VORÜBERSETZUNG

HTML-Datei

CSS-Datei

CSS-DateiP

RE

CO

MP

ILE

R HTML-Datei

CSS-Datei

DIE IDEE

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque

doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris

mandaremus, fore ut hic noster labor in varias reprehensiones

incurreret. nam quibusdam, et iis quidem non admodum indoctis,

totum hoc displicet philosophari. quidam autem non tam id

reprehendunt, si remissius agatur, sed tantum studium tamque

multam operam ponendam in eo non arbitrantur. erunt etiam, et ii

quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant

in Graecis legendis operam malle consumere. postremo aliquos

futuros suspicor, qui me ad alias litteras vocent, genus hoc

scribendi, etsi sit elegans, personae tamen et dignitatis esse

negent.

Contra quos omnis dicendum breviter existimo. Quamquam

philosophiae quidem vituperatoribus satis responsum est eo libro,

quo a nobis philosophia defensa et collaudata est, cum esset

accusata et vituperata ab Hortensio. qui liber cum et tibi probatus

videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi

veritus ne movere hominum studia viderer, retinere non posse. Qui

autem, si maxime hoc placeat, moderatius tamen id volunt fieri,

difficilem quandam temperantiam postulant in eo, quod semel

admissum coerceri reprimique non potest, ut propemodum

iustioribus utamur illis, qui omnino avocent a philosophia, quam his,

qui rebus infinitis modum constituant in reque eo meliore, quo maior

sit, mediocritatem desiderent.

HTML

CSS

DIE IDEE

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque

doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris

mandaremus, fore ut hic noster labor in varias reprehensiones

incurreret. nam quibusdam, et iis quidem non admodum indoctis,

totum hoc displicet philosophari. quidam autem non tam id

reprehendunt, si remissius agatur, sed tantum studium tamque

multam operam ponendam in eo non arbitrantur. erunt etiam, et ii

quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant

in Graecis legendis operam malle consumere. postremo aliquos

futuros suspicor, qui me ad alias litteras vocent, genus hoc

scribendi, etsi sit elegans, personae tamen et dignitatis esse

negent.

Contra quos omnis dicendum breviter existimo. Quamquam

philosophiae quidem vituperatoribus satis responsum est eo libro,

quo a nobis philosophia defensa et collaudata est, cum esset

accusata et vituperata ab Hortensio. qui liber cum et tibi probatus

videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi

veritus ne movere hominum studia viderer, retinere non posse. Qui

autem, si maxime hoc placeat, moderatius tamen id volunt fieri,

difficilem quandam temperantiam postulant in eo, quod semel

admissum coerceri reprimique non potest, ut propemodum

iustioribus utamur illis, qui omnino avocent a philosophia, quam his,

qui rebus infinitis modum constituant in reque eo meliore, quo maior

sit, mediocritatem desiderent.

header HTML

header CSS

main navigation HTML

main navigation CSS

main HTML

main CSS

TOOLS

DIE TOOLS

1. SPRACHEN

LESS & SASS

Eigenschaften

Selektoren

Eigenschaften

Selektoren

LESS & SASS

Eigenschaften

Selektoren

Eigenschaften

Selektoren Eigenschaften

Selektoren

Eigenschaften

Selektoren

LESS & SASS

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Eigenschaften

Selektoren

LESS & SASS

Eigenschaften

Selektoren

Eigenschaften

SelektorenEigenschaften

Selektoren

Eigenschaften

Selektoren

Eigenschaften

Selektoren

Eigenschaften

Selektoren

DIE TOOLS

2. PRECOMPILER FÜR CSS

CodeKit Hammer

Wird ständig weiterentwickelt ???

DIE TOOLS

2. PRECOMPILER FÜR CSS

CodeKit Hammer

Wird ständig weiterentwickelt ???

ONLY FOR MAC

DIE TOOLS

2. PRECOMPILER FÜR HTML

Hammer

???

DIE TOOLS

2. PRECOMPILER FÜR HTML

HTML-Datei

HTML-Datei

HTML-DateiP

RE

CO

MP

ILE

R

HTML-Datei

DIE IDEE

Headline 1Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque

doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris

mandaremus, fore ut hic noster labor in varias reprehensiones

incurreret. nam quibusdam, et iis quidem non admodum indoctis,

totum hoc displicet philosophari. quidam autem non tam id

reprehendunt, si remissius agatur, sed tantum studium tamque

multam operam ponendam in eo non arbitrantur. erunt etiam, et ii

quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant

in Graecis legendis operam malle consumere. postremo aliquos

futuros suspicor, qui me ad alias litteras vocent, genus hoc

scribendi, etsi sit elegans, personae tamen et dignitatis esse

negent.

Contra quos omnis dicendum breviter existimo. Quamquam

philosophiae quidem vituperatoribus satis responsum est eo libro,

quo a nobis philosophia defensa et collaudata est, cum esset

accusata et vituperata ab Hortensio. qui liber cum et tibi probatus

videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi

veritus ne movere hominum studia viderer, retinere non posse. Qui

autem, si maxime hoc placeat, moderatius tamen id volunt fieri,

difficilem quandam temperantiam postulant in eo, quod semel

admissum coerceri reprimique non potest, ut propemodum

iustioribus utamur illis, qui omnino avocent a philosophia, quam his,

qui rebus infinitis modum constituant in reque eo meliore, quo maior

sit, mediocritatem desiderent.

header HTML

header CSS

main navigation HTML

main navigation CSS

main HTML

main CSS

Wolf Brüning: Large Scale Interaction Pattern Library (UX Roundtable, Oktober 2013)http://uxhh.de/roundtable/archiv/index.html#Okt13

DIE STRUKTUR:

ATOMIC DESIGN

ATOMIC DESIGN

Atomic Design

Von: Brad Frost

Beyond Tellerrand Düsseldorf, 2013

ATOMIC DESIGN

A D V A N C E D

Atomic Design

Von: Brad Frost

Beyond Tellerrand Düsseldorf, 2013

PROTON

PROTON

KERN

KERN

ATOM

ATOM

MOLEKÜLE

MOLEKÜLE

ORGANISMEN

ORGANISMEN

ORGANISMEM

TEMPLATES

ORGANISMEM

TEMPLATES

SEITEN

ATOMIC DESIGN

A D V A N C E D

PROTON KERN ATOM MOLEKÜLE ORGANISMEN

ATOMIC DESIGN

A D V A N C E D

PROTON KERN ATOM MOLEKÜLE ORGANISMEN

TEMPLATES SEITEN

DANKE!

Twitter: @_Mr_Spike_

Xing: Christian Reichel

WEITERE ANGESPROCHENE THEMEN

HAML

http://haml.info

SMACSS

https://smacss.com

CodePen

http://codepen.io

Bourbon.io

http://bourbon.io

Compass

http://compass-style.org

Atlassian Styleguide

https://design.atlassian.com/latest/

Kulturbanause

http://kulturbanause.de

Emmet

http://emmet.io