UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung

In der aktuellen Frontend-Entwicklung passiert gerade furchtbar viel. Gefühlt

1/69 Documents & Tips - Sharing is our passion

Share This Page

  1. Christian Reichel
    In der aktuellen Frontend-Entwicklung passiert gerade furchtbar viel. Gefühlt
    Transcript Header:
    UX Roundtable Dezember 2014 - Revolutionen in der Frontend-Entwicklung
    Transcript Body:
    • 1. AKTUELLE REVOLUTIONEN IN DER FRONTEND-ENTWICKLUNG
    • 2. KOMPONENTENBASIERTE FRONTEND-ENTWICKLUNG
    • 3. KOMPONENTENBASIERTE FRONTEND-ENTWICKLUNG
    • 4. DAS BIN ICH Christian Reichel studiert Mensch-Computer Interaktion an der Uni Hamburg Werkstudent bei eparo GmbH Themen: Interaktionsdesign, Visuelle Gestaltung, Webentwicklung, UX
    • 5. 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
    • 6. WAS IST HTML?
    • 7. WAS IST HTML?
    • 8. WAS IST HTML?
    • 9. WAS IST HTML?
    • 10. WAS IST HTML?
    • 11. WAS IST HTML? 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, 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.
    • 12. WAS IST HTML? 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, 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.
    • 13. WAS IST HTML? Anfang Rumpf Ende
    • 14. WAS IST HTML?
      Warum sollte man sich diesen Vortrag als User Experience Experte oder Interaktionsdesigner antun? Ganz einfach: Interdisziplinarität rockt!
    • 15. WAS IST CSS?
    • 16. 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, 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.
    • 17. 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, 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.
    • 18. 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
    • 19. WAS IST CSS? Selektoren Eigenschaften
    • 20. WAS IST CSS? p { color: rgb(85, 85, 85); font-family: Gafata, sans-serif; font-size: 18px; }
    • 21. DAS PROBLEM: RIESEN PROJEKTE
    • 22. WO IST DAS PROBLEM? HTML CSS Selektoren Eigenschaften Anfang Rumpf Ende
    • 23. WO IST DAS PROBLEM? CSS Selektoren Eigenschaften HTML Anfang Anfang Rumpf Rumpf Ende Ende Selektoren Eigenschaften
    • 24. WO IST DAS PROBLEM? HTML CSS Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Rumpf Ende
    • 25. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf Ende WO IST DAS PROBLEM? CSS Datei 2
    • 26. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf Ende WO IST DAS PROBLEM? CSS Datei 2 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, 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.
    • 27. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf Ende WO IST DAS PROBLEM? CSS Datei 2
    • 28. HTML CSS Datei 1 Selektoren Eigenschaften Anfang Anfang Anfang Rumpf Ende Selektoren Eigenschaften Selektoren Eigenschaften Rumpf 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
    • 29. DIE LÖSUNG: PRECOMPILING
    • 30. ÜBERSETZEN 100101010101 010101010101 010110100101 000101010010 101011010010 100010101000 101 … HTML-Datei CSS-Datei Browser
    • 31. ÜBERSETZEN 100101010101 010101010101 010110100101 000101010010 101011010010 100010101000 101 … HTML-Datei CSS-Datei COBMroPwILsEerR
    • 32. VORÜBERSETZUNG HTML-Datei CSS-Datei CSS-Datei PRECOMPILER HTML-Datei CSS-Datei
    • 33. DIE IDEE 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, 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
    • 34. DIE IDEE 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, 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
    • 35. TOOLS
    • 36. DIE TOOLS 1. SPRACHEN
    • 37. LESS & SASS Selektoren Eigenschaften Selektoren Eigenschaften
    • 38. LESS & SASS Selektoren Selektoren Eigenschaften Eigenschaften Eigenschaften Selektoren Selektoren Eigenschaften
    • 39. LESS & SASS Selektoren Selektoren Selektoren Eigenschaften Eigenschaften Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften
    • 40. LESS & SASS Selektoren Selektoren Eigenschaften Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften Selektoren Eigenschaften
    • 41. DIE TOOLS 2. PRECOMPILER FÜR CSS CodeKit Hammer Wird ständig weiterentwickelt ???
    • 42. DIE TOOLS 2. PRECOMPILER FÜR CSS ONLY FOR MAC CodeKit Hammer Wird ständig weiterentwickelt ???
    • 43. DIE TOOLS 2. PRECOMPILER FÜR HTML Hammer ???
    • 44. DIE TOOLS 2. PRECOMPILER FÜR HTML HTML-Datei HTML-Datei HTML-Datei PRECOMPILER HTML-Datei
    • 45. DIE IDEE 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, 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
    • 46. Wolf Brüning: Large Scale Interaction Pattern Library (UX Roundtable, Oktober 2013) http://uxhh.de/roundtable/archiv/index.html#Okt13
    • 47. DIE STRUKTUR: ATOMIC DESIGN
    • 48. ATOMIC DESIGN Atomic Design Von: Brad Frost Beyond Tellerrand Düsseldorf, 2013
    • 49. ATOMIC DESIGN A D V A N C E D Atomic Design Von: Brad Frost Beyond Tellerrand Düsseldorf, 2013
    • 50. PROTON
    • 51. PROTON
    • 52. KERN
    • 53. KERN
    • 54. ATOM
    • 55. ATOM
    • 56. MOLEKÜLE
    • 57. MOLEKÜLE
    • 58. ORGANISMEN
    • 59. ORGANISMEN
    • 60. TEMPLATES ORGANISMEM
    • 61. TEMPLATES ORGANISMEM
    • 62. SEITEN
    • 63. ATOMIC DESIGN A D V A N C E D PROTON KERN ATOM MOLEKÜLE ORGANISMEN
    • 64. ATOMIC DESIGN A D V A N C E D PROTON KERN ATOM MOLEKÜLE ORGANISMEN TEMPLATES SEITEN
    • 65. DANKE! Twitter: @_Mr_Spike_ Xing: Christian Reichel
    • 66. 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
    View More