Recommended
Recommended
More Related Content
Similar to Lessons learned implementing a modern frontend development workflow.
Similar to Lessons learned implementing a modern frontend development workflow. (20)
Recently uploaded
Recently uploaded (20)
Lessons learned implementing a modern frontend development workflow.
- 1. Lessons learned implementing a modern FRONTEND DEVELOPMENT WORKFLOW By Marimar Hollenbach & Christian Höpfner
- 2. MARIMAR HOLLENBACH @MsMarHigh Creative Developer, Project A CHRISTIAN HÖPFNER @chriz_hoepfner Frontend Engineer, Project A WHO WE ARE Introduction
- 3. Lesson #1 Component based approach Lesson #2 Shared vocabulary Lesson #3 Single source of truth Lesson #4 Styleguide Lesson #5 Communicate benefits Lesson #6 Culture 3 AGENDA Introduction
- 5. 5 Submit application form Link to page Newsle er signup Introduction REUSABLE COMPONENTS
- 6. 6 Canned Tomatoes Introduction REAL LIFE EXAMPLE Bolognese Curry Sauce Tomato sauce Tikka Masala Spaghe i Bolognese Chilli soup
- 7. Introduction OLD-SCHOOL WORKFLOW 8 Idea Go liveDevelop pages Design pages
- 9. Introduction NEW-SCHOOL WORKFLOW 10 Idea Development Go live Component based design No Quick wireframe Yes! FAST TRACK! Style guide Can we reuse?
- 14. 15 STYLE GUIDE BASED PROJECTS Introduction
- 16. Component based approach THE IDEA BEHIND ■ divide & conquer ■ split up complex problems ■ easier to solve individually 17
- 18. Component based approach CONSTRUCTION 20 Simple componentsComplex componentsSectionsPage
- 19. Component based approach CONSTRUCTION 20 Simple componentsComplex componentsSectionsPage
- 20. Component based approach CONSTRUCTION 20 Simple componentsComplex componentsSectionsPage
- 21. Component based approach CONSTRUCTION 20 Simple componentsComplex componentsSectionsPage
- 22. Component based approach ANATOMY OF A COMPONENT 21 ■ Defined by codebase: ■ Semantic Content (HTML) ■ Design (CSS) ■ Behaviour (JS) ■ + Data (JSON)
- 23. ESTABLISH A SHARED VOCABULARY Lesson #2 22
- 25. Establish a shared vocabulary DEADLINE 24
- 26. Establish a shared vocabulary GOOD UX IN TEAM WORK 25 COGNITIVE LOAD The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks. –Nielsen Norman Group
- 27. Establish a shared vocabulary GOOD UX IN TEAM WORK 26 COGNITIVE LOAD The total cognitive load, or amount of mental processing power needed to use your work, affects how easily your team mates find content and complete tasks. –Nielsen Norman Group (edited)
- 28. Establish a shared vocabulary NAMING COMPONENTS ■ Sit together and name components together ■ Influenced by semantic HTML ■ Use names in specs, design, code 27
- 29. Establish a shared vocabulary NAMING COMPONENTS 28 NAMING IS HARD
- 30. Establish a shared vocabulary NAMING COMPONENTS ■ Literal and generic ■ Reusable ■ Makes sense in isolation ■ Context and content independent 29
- 31. Establish a shared vocabulary NAMING COMPONENTS 30
- 32. Establish a shared vocabulary ATOMIC DESIGN 31
- 33. 32 Job Link? FEATURED LINK Establish a shared vocabulary
- 34. 33 Icon Title Body text Label FEATURED LINK Establish a shared vocabulary
- 35. 34 Icon Title Body text Label Flat bu on FEATURED LINK Establish a shared vocabulary
- 36. 35 Title Body text Flat bu on FEATURED LINK Establish a shared vocabulary
- 37. 36 FEATURED LINK Establish a shared vocabulary
- 38. 37 FEATURED LINK Establish a shared vocabulary
- 39. 38 FEATURED LINK Establish a shared vocabulary
- 40. Establish a shared vocabulary FEATURED LINK 39
- 41. 40 TILE Establish a shared vocabulary
- 42. 41 TILE Establish a shared vocabulary News tile?
- 43. 42 TILE Establish a shared vocabulary
- 44. 43 TILE Establish a shared vocabulary
- 45. 44 Image Body text Metadata Icon Label Flat bu on TILE Establish a shared vocabulary
- 46. 45 TILE Establish a shared vocabulary
- 47. 46 TILE Establish a shared vocabulary
- 48. 46 TILE Establish a shared vocabulary
- 49. 47 TILE Establish a shared vocabulary
- 50. 48 TILE Establish a shared vocabulary
- 51. 49 TILE Establish a shared vocabulary
- 52. SINGLE SOURCES OF TRUTH Lesson #3 50
- 53. Single sources of truth DOCUMENTATION 51 ■ Documentation is key ■ Li le extra documentation ■ Self documenting system
- 54. Single sources of truth DOCUMENTATION 51 ■ Documentation is key ■ Li le extra documentation ■ Self documenting system Design assets + Developed components
- 55. Single sources of truth DESIGN ASSETS 52 UP-TO-DATE DESIGNS
- 56. Single source of truth INVISION 53 ■ Synchronization ■ Web-viewer ■ Asset downloads ■ Comment system
- 58. Single source of truth TOOLS: SKETCH 55 ■ Symbols ■ Central component definition
- 59. Single sources of truth DEVELOPMENT ASSETS 56 VISIBILITY
- 60. Single sources of truth DEVELOPMENT ASSETS 57 IN-SYNC WITH APPLICATION
- 61. IMPLEMENT A LIVING STYLE GUIDE Lesson #4 58
- 62. Implement a living style guide WHAT IS A LIVING STYLE GUIDE? A website that allows us to view: ■ Simple, isolated components ■ Complex components ■ Templates ■ Example Pages 59
- 63. Implement a living style guide WHAT IS A LIVING STYLE GUIDE? Components in their natural habitat THE BROWSER 60
- 64. Implement a living style guide KEY LEARNING 61
- 65. Implement a living style guide KEY LEARNING ■ Implement so it cannot abandoned or circumvented 63
- 66. Implement a living style guide INTRODUCING… 64
- 67. Implement a living style guide INTRODUCING… 65
- 68. Implement a living style guide INTRODUCING… ZTYLR 3000! 65
- 69. Implement a living style guide ZTYLR: FILTERING 66
- 70. 67 ZTYLR: TESTING Implement a living style guide
- 71. 68 ZTYLR: TESTING Implement a living style guide
- 72. 69 ZTYLR: RESPONSIVE VIEW Implement a living style guide
- 73. 70 ZTYLR: DATA DOCUMENTATION Implement a living style guide
- 74. Implement a living style guide BENEFITS OF A PUBLIC STYLE GUIDE 71 TECHNICAL BACKGROUND
- 75. Implement a living style guide TECHNICAL INTEGRATION 72
- 76. Implement a living style guide TECHNICAL INTEGRATION 73 Styleguide Application Build process Components Assets
- 77. Implement a living style guide TECHNICAL INTEGRATION ■ Include mechanism: ■ Identifier ■ Data 74
- 78. Implement a living style guide NEW-SCHOOL WORKFLOW 75 Idea Development Go live Component based design No Quick wireframe Yes! FAST TRACK! Style guide Can we reuse?
- 80. Understand benefits GENERAL BENEFITS ■ team specific goals ■ diverge approaching crunch time ■ working against each other 77
- 81. Understand benefits GENERAL BENEFITS ■ encourage communication ■ aligned goals ■ common understanding 78
- 82. Understand benefits INDIVIDUAL BENEFITS 79 Independency Resources Reduce manual work Homogeneous results Reuse code Less conflicts PM Designer Developer
- 83. Understand benefits BUSINESS PEOPLE 80 LONG TERM ASSETS
- 86. CREATE A COMPANY CULTURE Lesson #6 83
- 87. Create a company culture THE BASICS ■ THE main project ■ Reuse, reuse, reuse ■ Make it public ■ A bit slower but be er thought out 84
- 88. Create a company culture BENEFITS OF A PUBLIC STYLE GUIDE ACCOUNTABILITY 85
- 89. Create a company culture BENEFITS OF A PUBLIC STYLE GUIDE 86 TRANSPARENCY
- 90. Create a company culture BENEFITS OF A PUBLIC STYLE GUIDE 87 COMMUNICATION
- 91. Create a company culture BENEFITS OF A PUBLIC STYLE GUIDE RECRUITMENT 88
- 92. Create a company culture LAST BUT NOT LEAST 89 CELEBRATE SUCCESS
- 93. SUMMARY Lesson #1 Component based approach Lesson #2 Shared vocabulary Lesson #3 Single source of truth Lesson #4 Styleguide Lesson #5 Communicate benefits Lesson #6 Culture 90
- 94. THANK YOU! 91