Frontend development in complex projectsFrontend Conference Zurich 20129th September 2012                    Rosmarie Wyss...
Rosmarie Wysseier• Gymnasium (Psychology and Economy)• Creative Media Diploma, SAE Zürich, 2004• Bachelor of Computer Scie...
Thomas Jaggi• MSc Food Science (Major in Human  Nutrition) from ETH Zurich• Fiddling around with frontend  technologies si...
Unic at a glance• Founded in 1996 in Switzerland• We design, develop and maintain premium e-business solutions  for e-comm...
What we are going to talk about• Writing maintainable and scalable  HTML / CSS• Data mocking• Unit testing• Continuous int...
Starting point• Lots of people involved  • Multiple devs / teams are working on the same project  • Sometimes in parallel,...
Agenda• Writing maintainable and scalable  HTML / CSS• Data mocking• Unit testing• Continuous integration                 ...
Exemplary issues• Issue #1: HTML code is highly redundant• Issue #2: CSS is location-dependent• Issue #3: CSS assumes too ...
probably copyright-protected screenshot of “The Office”Issue #1HTML code is highly redundant
«The customer just told me he wantsClick to editform in the header, afterthis search Master title styleall.»– Project mana...
Problem: Redundant HTML code is difficult to maintain• Design templates for every existing page type• Usually: 1 design te...
Solution• Modularization of the HTML• Our tool of choice: Middleman (http://middlemanapp.com)                             ...
Using partials in middleman• Layout file:   <html>                 <head>                   <title>My Site</title>        ...
Disadvantages• Build process necessary• HTML for one page type spread over many files                                     ...
probably copyright-protected screenshot of “The Office”Issue #2CSS is location-dependent
«The customer just told me he wants toClick to edit Master the main contentto use this teaser in title stylearea, too.»– P...
Problem: Location-dependent CSS is not flexible #sidebar a {   color: #c30;   text-decoration: none; } #sidebar .teaser { ...
Solution• Modularization• Approach: OOCSS                    © Unic - Seite 18
«Basically, a CSS “object” is a repeatingvisual pattern, which can be abstractedinto an independent snippet of HTML,Click ...
Multiple approaches• Some famous methodologies:  • OOCSS by Nicole Sullivan (https://github.com/stubbornella/oocss/)  • SM...
Examples (based on how I understand their docs)• OOCSS:        <div class="teaser featured">                  <h3 class="t...
probably copyright-protected screenshot of “The Office”Issue #3CSS assumes too much about the markup
«We can’t strictly implement yourClick tostructure, our CMS rendersHTML edit Master title styleadditional tags.»– Backend ...
Example• Before:   <div class="block-teaser">              <h3>Title</h3>              <div class="content“>Blabla</div>  ...
Problem: CSS assumes too much about the markup                                                  Slide updated to reduce co...
Disadvantages• Missing out on generally useful selectors• Extra markup                                              © Unic...
probably copyright-protected screenshot of “The Office”Issue #4JS is not adequately separated from HTML / CSS
«Your JavaScript does not work. HowClick to edit Master title styleabout testing before shipping?»– Backend developer     ...
Styling hooks used as JS hooks• JavaScript functionality is coupled too tightly to CSS selectors used for styling• E.g.: C...
Example• HTML:   <div class=“carousel">            <ul>              <li>Hi there</li>              <li>Hi there 2</li>   ...
Solution• Use namespaced classes as your JS “hooks” (i.e. “js-carousel”)• Use data attributes instead of classes          ...
Example<div class="carousel" data-init="carousel“ data-options={}>  <ul data-role="items">    <li data-role="item">Hi ther...
Disadvantages• Performance of attribute selectors• Extra markup                                       © Unic - Seite 33
probably copyright-protected screenshot of “The Office”Issue #5No consistent coding style
«I just refactored your multi-linedeclarations into single-line onesClick to edit Master title stylebecause I like them be...
Problem: Every developer follows his own private styleguide• Indentation, spaces: CSS/JS is difficult to read• Structure: ...
Example: Github (https://github.com/styleguide/css)• Use soft-tabs with a two space indent.• Put spaces after : in propert...
Disadvantages• Takes a lot of time to develop / agree on• Restricting                                              © Unic ...
Other examples• Curated by Chris Coyier, http://css-tricks.com/css-style-guides/:  • Google HTML/CSS Style Guide    (http:...
probably copyright protected screenshot of “The Office”Strive to make everyone’s life easier.
Agenda• Writing maintainable and scalable  HTML / CSS• Data mocking• Unit testing• Continuous integration                 ...
Data mocking• Mock a GET-Request$.get(/js/data/data.json, function(data) {    alert(This was easy);});• Mock REST (i.e. wi...
How can weMaster title styleClick to edit mock this data                               © Unic - Seite 43
Mock of REST requestsvar oldBackboneSync = Backbone.sync;Backbone.sync = function(method, model, options) {    …    if (me...
Mock of REST requestsBackboneMock = {   "/request_mocks/collection/": {     "read": function () {        return [{        ...
Agenda• Writing maintainable and scalable  HTML / CSS• Data mocking• Unit testing• Continuous integration                 ...
Who does write unit tests forClick to edit Master title styleJavaScript                                   © Unic - Seite 47
Unit testing• Tests should cover the most important pieces of code• You should test the interface with the backend careful...
Agenda• Writing maintainable and scalable  HTML / CSS• Data mocking• Unit testing• Continuous integration                 ...
Does anybody have a CI server for theClick to edit Master title stylefrontend                                        © Uni...
Continuous Integration                 layout, partials     HAML                                  HTML              @impor...
Continuous Integration                      Check updates                                      Jenkins                SVN ...
Release Management   JS                Automated Release   CSS   HTML              Adaption in System   Mocks             ...
© Unic - Seite 54
Unic AG                Rosmarie WysseierBelpstrasse 48         Senior Frontend Engineer3007 BernTel +41 31 560 12 12   Tho...
Nächste SlideShare
Wird geladen in …5
×

Unic - frontend development-in-complex-projects

2.393 Aufrufe

Veröffentlicht am

Talk by Thomas Jaggi and Romy Wysseier at the Frontend Conference Zurich 2012

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.393
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
213
Aktionen
Geteilt
0
Downloads
31
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Unic - frontend development-in-complex-projects

  1. 1. Frontend development in complex projectsFrontend Conference Zurich 20129th September 2012 Rosmarie Wysseier & Thomas Jaggi
  2. 2. Rosmarie Wysseier• Gymnasium (Psychology and Economy)• Creative Media Diploma, SAE Zürich, 2004• Bachelor of Computer Science University of Applied Sciences Bern, 2009 © Unic - Seite 2
  3. 3. Thomas Jaggi• MSc Food Science (Major in Human Nutrition) from ETH Zurich• Fiddling around with frontend technologies since before it was cool © Unic - Seite 3
  4. 4. Unic at a glance• Founded in 1996 in Switzerland• We design, develop and maintain premium e-business solutions for e-commerce, digital communication and collaboration• We are an independent, owner-operated group with 270 employees• Sales of 38 million CHF i.e. 33 million Euro (2011)• 7 offices: Amsterdam, Bern, Brussels, Karlsruhe, Munich, Vienna and Zurich © Unic - Seite 4
  5. 5. What we are going to talk about• Writing maintainable and scalable HTML / CSS• Data mocking• Unit testing• Continuous integration © Unic - Seite 5
  6. 6. Starting point• Lots of people involved • Multiple devs / teams are working on the same project • Sometimes in parallel, sometimes one after another• High degree of uncertainty • Detail specifications and/or design might still be in the works • Interface frontend – backend not yet defined © Unic - Seite 6
  7. 7. Agenda• Writing maintainable and scalable HTML / CSS• Data mocking• Unit testing• Continuous integration © Unic - Seite 7
  8. 8. Exemplary issues• Issue #1: HTML code is highly redundant• Issue #2: CSS is location-dependent• Issue #3: CSS assumes too much about the markup• Issue #4: JS is not adequately separated from HTML / CSS• Issue #5: No consistent coding style © Unic - Seite 8
  9. 9. probably copyright-protected screenshot of “The Office”Issue #1HTML code is highly redundant
  10. 10. «The customer just told me he wantsClick to editform in the header, afterthis search Master title styleall.»– Project manager © Unic - Seite 10
  11. 11. Problem: Redundant HTML code is difficult to maintain• Design templates for every existing page type• Usually: 1 design template = 1 HTML file• Changing the structure means changing dozens of HTML files• Find & replace has its limits © Unic - Seite 11
  12. 12. Solution• Modularization of the HTML• Our tool of choice: Middleman (http://middlemanapp.com) © Unic - Seite 12
  13. 13. Using partials in middleman• Layout file: <html> <head> <title>My Site</title> </head> <body> <%= partial "header" %> <%= yield %> </body> </html>• Partial: <header> <a href="#" class="logo“>Home</a> </header> © Unic - Seite 13
  14. 14. Disadvantages• Build process necessary• HTML for one page type spread over many files © Unic - Seite 14
  15. 15. probably copyright-protected screenshot of “The Office”Issue #2CSS is location-dependent
  16. 16. «The customer just told me he wants toClick to edit Master the main contentto use this teaser in title stylearea, too.»– Project manager © Unic - Seite 16
  17. 17. Problem: Location-dependent CSS is not flexible #sidebar a { color: #c30; text-decoration: none; } #sidebar .teaser { background-image: linear-gradient(to bottom, #ddd, #fff); padding: 1em; } #sidebar .teaser h3 { font-size: 1.2em; font-weight: normal; margin-bottom: 1em; } © Unic - Seite 17
  18. 18. Solution• Modularization• Approach: OOCSS © Unic - Seite 18
  19. 19. «Basically, a CSS “object” is a repeatingvisual pattern, which can be abstractedinto an independent snippet of HTML,Click and possibly JavaScript. OnceCSS, to edit Master title stylecreated, an object can then be reusedthroughout a site.»– OOCSS (https://github.com/stubbornella/oocss/wiki) © Unic - Seite 19
  20. 20. Multiple approaches• Some famous methodologies: • OOCSS by Nicole Sullivan (https://github.com/stubbornella/oocss/) • SMACSS by Jonathan Snook (http://smacss.com/) • BEM by Yandex (http://bem.github.com/) © Unic - Seite 20
  21. 21. Examples (based on how I understand their docs)• OOCSS: <div class="teaser featured"> <h3 class="title">Title</h3> <div class="bd">Blabla</div> </div>• SMACSS: <div class="teaser is-featured"> <h3>Title</h3> <div class="body">Blabla</div> </div>• BEM <div class="teaser teaser_type_featured"> <h3 class="teaser__title">Title</h3> <div class="teaser__body">Blabla</div> </div> © Unic - Seite 21
  22. 22. probably copyright-protected screenshot of “The Office”Issue #3CSS assumes too much about the markup
  23. 23. «We can’t strictly implement yourClick tostructure, our CMS rendersHTML edit Master title styleadditional tags.»– Backend developer © Unic - Seite 23
  24. 24. Example• Before: <div class="block-teaser"> <h3>Title</h3> <div class="content“>Blabla</div> </div>• After: <div class="block-teaser"> <span id="hfk42342kj:ksa89080hajlk"> <h3>Title</h3> </span> <div class="content“>Blabla</div> </div> © Unic - Seite 24
  25. 25. Problem: CSS assumes too much about the markup Slide updated to reduce confusion• Avoid • Immediate child selector: .block-teaser > h3 {} • Adjacent sibling selector: .block-teaser .xy + h3 {} • And similar ones .block-teaser .title {}• Use additional classes instead: // or faster regarding // selector matching: .block-teaser-title {} © Unic - Seite 25
  26. 26. Disadvantages• Missing out on generally useful selectors• Extra markup © Unic - Seite 26
  27. 27. probably copyright-protected screenshot of “The Office”Issue #4JS is not adequately separated from HTML / CSS
  28. 28. «Your JavaScript does not work. HowClick to edit Master title styleabout testing before shipping?»– Backend developer © Unic - Seite 28
  29. 29. Styling hooks used as JS hooks• JavaScript functionality is coupled too tightly to CSS selectors used for styling• E.g.: Changing a class breaks the JS © Unic - Seite 29
  30. 30. Example• HTML: <div class=“carousel"> <ul> <li>Hi there</li> <li>Hi there 2</li> </ul> </div>• JS: $(function() { var $target = $(.carousel‘), carousel = new Carousel($target); carousel.init(); }); © Unic - Seite 30
  31. 31. Solution• Use namespaced classes as your JS “hooks” (i.e. “js-carousel”)• Use data attributes instead of classes © Unic - Seite 31
  32. 32. Example<div class="carousel" data-init="carousel“ data-options={}> <ul data-role="items"> <li data-role="item">Hi there</li> <li data-role="item">Hi there 2</li> </ul></div> © Unic - Seite 32
  33. 33. Disadvantages• Performance of attribute selectors• Extra markup © Unic - Seite 33
  34. 34. probably copyright-protected screenshot of “The Office”Issue #5No consistent coding style
  35. 35. «I just refactored your multi-linedeclarations into single-line onesClick to edit Master title stylebecause I like them better.»– Other frontend developer © Unic - Seite 35
  36. 36. Problem: Every developer follows his own private styleguide• Indentation, spaces: CSS/JS is difficult to read• Structure: Specific parts are hard to find• Versioning: Refactoring messes up history © Unic - Seite 36
  37. 37. Example: Github (https://github.com/styleguide/css)• Use soft-tabs with a two space indent.• Put spaces after : in property declarations.• Put spaces before { in rule declarations.• Use hex color codes #000 unless using rgba.• Use // for comment blocks (instead of /* */).• Document styles with KSS © Unic - Seite 37
  38. 38. Disadvantages• Takes a lot of time to develop / agree on• Restricting © Unic - Seite 38
  39. 39. Other examples• Curated by Chris Coyier, http://css-tricks.com/css-style-guides/: • Google HTML/CSS Style Guide (http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml) • WordPress CSS Coding Standards (http://make.wordpress.org/core/handbook/coding-standards/css/) • «Idiomatic CSS» by Nicolas Gallagher (https://github.com/necolas/idiomatic-css) • … © Unic - Seite 39
  40. 40. probably copyright protected screenshot of “The Office”Strive to make everyone’s life easier.
  41. 41. Agenda• Writing maintainable and scalable HTML / CSS• Data mocking• Unit testing• Continuous integration © Unic - Seite 41
  42. 42. Data mocking• Mock a GET-Request$.get(/js/data/data.json, function(data) { alert(This was easy);});• Mock REST (i.e. with Backbone)POST /collectionGET /collection[/id]PUT /collection/idDELETE /collection/id © Unic - Seite 42
  43. 43. How can weMaster title styleClick to edit mock this data © Unic - Seite 43
  44. 44. Mock of REST requestsvar oldBackboneSync = Backbone.sync;Backbone.sync = function(method, model, options) { … if (method == "delete" || method == "update") // handle id in URL … // is URL mocked? if (urls[baseUrl]) … // is method mocked? … return response[method]; else oldBackboneSync(method, model, options);} © Unic - Seite 44
  45. 45. Mock of REST requestsBackboneMock = { "/request_mocks/collection/": { "read": function () { return [{ "id": "1", "title": "This was hard work!" }] }, "create": function () { return { "id": Math.floor(Math.random()*10000) } }, "delete": function () { return {}; } }}; © Unic - Seite 45
  46. 46. Agenda• Writing maintainable and scalable HTML / CSS• Data mocking• Unit testing• Continuous integration © Unic - Seite 46
  47. 47. Who does write unit tests forClick to edit Master title styleJavaScript © Unic - Seite 47
  48. 48. Unit testing• Tests should cover the most important pieces of code• You should test the interface with the backend carefully• You should not test styling or plugins © Unic - Seite 48
  49. 49. Agenda• Writing maintainable and scalable HTML / CSS• Data mocking• Unit testing• Continuous integration © Unic - Seite 49
  50. 50. Does anybody have a CI server for theClick to edit Master title stylefrontend © Unic - Seite 50
  51. 51. Continuous Integration layout, partials HAML HTML @import "partials/base"; SCSS CSS //= require plugins JS JS Middleman © Unic - Seite 51
  52. 52. Continuous Integration Check updates Jenkins SVN Source Ruby server Deploy HTML JS CSS Apache server © Unic - Seite 52
  53. 53. Release Management JS Automated Release CSS HTML Adaption in System Mocks Automated Release © Unic - Seite 53
  54. 54. © Unic - Seite 54
  55. 55. Unic AG Rosmarie WysseierBelpstrasse 48 Senior Frontend Engineer3007 BernTel +41 31 560 12 12 Thomas JaggiFax +41 31 560 12 13 Senior Frontend Engineerbern@unic.comwww.unic.com © Unic - Seite 55

×