Post on 13-Jul-2015
transcript
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