SlideShare ist ein Scribd-Unternehmen logo
1 von 55
Downloaden Sie, um offline zu lesen
Frontend development in complex projects
Frontend Conference Zurich 2012

9th September 2012                    Rosmarie Wysseier & Thomas Jaggi
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
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
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
What we are going to talk about

• Writing maintainable and scalable
  HTML / CSS
• Data mocking
• Unit testing
• Continuous integration




                                      © Unic - Seite 5
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
Agenda

• Writing maintainable and scalable
  HTML / CSS
• Data mocking
• Unit testing
• Continuous integration




                                      © Unic - Seite 7
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
probably copyright-protected screenshot of “The Office”




Issue #1
HTML code is highly redundant
«The customer just told me he wants
Click to editform in the header, after
this search Master title style
all.»


– Project manager




                                         © Unic - Seite 10
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
Solution

• Modularization of the HTML
• Our tool of choice: Middleman (http://middlemanapp.com)




                                                            © Unic - Seite 12
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
Disadvantages

• Build process necessary
• HTML for one page type spread over many files




                                                  © Unic - Seite 14
probably copyright-protected screenshot of “The Office”




Issue #2
CSS is location-dependent
«The customer just told me he wants to
Click to edit Master the main content
to use this teaser in title style
area, too.»


– Project manager




                                         © Unic - Seite 16
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
Solution

• Modularization
• Approach: OOCSS




                    © Unic - Seite 18
«Basically, a CSS “object” is a repeating
visual pattern, which can be abstracted
into an independent snippet of HTML,
Click and possibly JavaScript. Once
CSS, to edit Master title style
created, an object can then be reused
throughout a site.»
– OOCSS (https://github.com/stubbornella/oocss/wiki)




                                                       © Unic - Seite 19
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
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
probably copyright-protected screenshot of “The Office”




Issue #3
CSS assumes too much about the markup
«We can’t strictly implement your
Click tostructure, our CMS renders
HTML edit Master title style
additional tags.»


– Backend developer




                                     © Unic - Seite 23
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
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
Disadvantages

• Missing out on generally useful selectors
• Extra markup




                                              © Unic - Seite 26
probably copyright-protected screenshot of “The Office”




Issue #4
JS is not adequately separated from HTML / CSS
«Your JavaScript does not work. How
Click to edit Master title style
about testing before shipping?»


– Backend developer




                                      © Unic - Seite 28
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
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
Solution

• Use namespaced classes as your JS “hooks” (i.e. “js-carousel”)
• Use data attributes instead of classes




                                                                   © Unic - Seite 31
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
Disadvantages

• Performance of attribute selectors
• Extra markup




                                       © Unic - Seite 33
probably copyright-protected screenshot of “The Office”




Issue #5
No consistent coding style
«I just refactored your multi-line
declarations into single-line ones
Click to edit Master title style
because I like them better.»


– Other frontend developer




                                     © Unic - Seite 35
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
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
Disadvantages

• Takes a lot of time to develop / agree on
• Restricting




                                              © Unic - Seite 38
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
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




                                      © Unic - Seite 41
Data mocking

• Mock a GET-Request

$.get('/js/data/data.json', function(data) {
    alert('This was easy');
});



• Mock REST (i.e. with Backbone)

POST               /collection
GET                /collection[/id]
PUT                /collection/id
DELETE             /collection/id




                                               © Unic - Seite 42
How can weMaster title style
Click to edit mock this data




                               © Unic - Seite 43
Mock of REST requests

var 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
Mock of REST requests

BackboneMock = {
   "/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
Agenda

• Writing maintainable and scalable
  HTML / CSS
• Data mocking
• Unit testing
• Continuous integration




                                      © Unic - Seite 46
Who does write unit tests for
Click to edit Master title style
JavaScript




                                   © Unic - Seite 47
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
Agenda

• Writing maintainable and scalable
  HTML / CSS
• Data mocking
• Unit testing
• Continuous integration




                                      © Unic - Seite 49
Does anybody have a CI server for the
Click to edit Master title style
frontend




                                        © Unic - Seite 50
Continuous Integration

                 layout, partials

     HAML                                  HTML



              @import "partials/base";
     SCSS                                  CSS



                   //= require 'plugins'
     JS                                    JS



                                           Middleman

                                                       © Unic - Seite 51
Continuous Integration

                      Check updates



                                      Jenkins
                SVN      Source
                                                 Ruby server



                                        Deploy
                                        HTML
                                        JS
                                        CSS

                                                 Apache server
                                                            © Unic - Seite 52
Release Management


   JS                Automated Release
   CSS




   HTML              Adaption in System
   Mocks



                                  Automated Release




                                                      © Unic - Seite 53
© Unic - Seite 54
Unic AG                Rosmarie Wysseier

Belpstrasse 48         Senior Frontend Engineer
3007 Bern
Tel +41 31 560 12 12   Thomas Jaggi
Fax +41 31 560 12 13
                       Senior Frontend Engineer
bern@unic.com
www.unic.com




                                                  © Unic - Seite 55

Weitere ähnliche Inhalte

Was ist angesagt?

Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate PackageSimon Collison
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)Zoe Gillenwater
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers PerspectiveMediacurrent
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
 
What is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? WebinarWhat is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? WebinarSuzanne Dergacheva
 
Google’s PRPL Web development pattern
Google’s PRPL Web development patternGoogle’s PRPL Web development pattern
Google’s PRPL Web development patternJeongkyu Shin
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Cristina Chumillas
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential TrainingKaloyan Kosev
 
Content First – Planning Drupal Content Types
Content First – Planning Drupal Content TypesContent First – Planning Drupal Content Types
Content First – Planning Drupal Content TypesCarrie Hane
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDavid Burns
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignDebra Shapiro
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
 
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type ChecklistPreventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type ChecklistAcquia
 

Was ist angesagt? (20)

Html5
Html5Html5
Html5
 
Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
BEM it!
BEM it!BEM it!
BEM it!
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
What is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? WebinarWhat is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? Webinar
 
Google’s PRPL Web development pattern
Google’s PRPL Web development patternGoogle’s PRPL Web development pattern
Google’s PRPL Web development pattern
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Content First – Planning Drupal Content Types
Content First – Planning Drupal Content TypesContent First – Planning Drupal Content Types
Content First – Planning Drupal Content Types
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type ChecklistPreventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
 

Andere mochten auch

Technology independent UI development with JVx
Technology independent UI development with JVxTechnology independent UI development with JVx
Technology independent UI development with JVxSIB Visions GmbH
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosMatteo Papadopoulos
 
Agile IT: Modern Architecture for Rapid Mobile App Development
Agile IT: Modern Architecture for Rapid Mobile App DevelopmentAgile IT: Modern Architecture for Rapid Mobile App Development
Agile IT: Modern Architecture for Rapid Mobile App DevelopmentAnyPresence
 
Basics of Rich Internet Applications
Basics of Rich Internet ApplicationsBasics of Rich Internet Applications
Basics of Rich Internet ApplicationsSubramanyan Murali
 
Comparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksComparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksAngelin R
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With ElmBrian Hogan
 
Modern Rapid Application Development - Too good to be true
Modern Rapid Application Development - Too good to be trueModern Rapid Application Development - Too good to be true
Modern Rapid Application Development - Too good to be trueWaveMaker, Inc.
 
Cost Effective Web Development Techniques
Cost Effective Web Development TechniquesCost Effective Web Development Techniques
Cost Effective Web Development TechniquesDrew McLellan
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersLemi Orhan Ergin
 
Architecture of a Modern Web App
Architecture of a Modern Web AppArchitecture of a Modern Web App
Architecture of a Modern Web Appscothis
 

Andere mochten auch (10)

Technology independent UI development with JVx
Technology independent UI development with JVxTechnology independent UI development with JVx
Technology independent UI development with JVx
 
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaosWeb Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
 
Agile IT: Modern Architecture for Rapid Mobile App Development
Agile IT: Modern Architecture for Rapid Mobile App DevelopmentAgile IT: Modern Architecture for Rapid Mobile App Development
Agile IT: Modern Architecture for Rapid Mobile App Development
 
Basics of Rich Internet Applications
Basics of Rich Internet ApplicationsBasics of Rich Internet Applications
Basics of Rich Internet Applications
 
Comparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksComparison of Java Web Application Frameworks
Comparison of Java Web Application Frameworks
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With Elm
 
Modern Rapid Application Development - Too good to be true
Modern Rapid Application Development - Too good to be trueModern Rapid Application Development - Too good to be true
Modern Rapid Application Development - Too good to be true
 
Cost Effective Web Development Techniques
Cost Effective Web Development TechniquesCost Effective Web Development Techniques
Cost Effective Web Development Techniques
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Architecture of a Modern Web App
Architecture of a Modern Web AppArchitecture of a Modern Web App
Architecture of a Modern Web App
 

Ähnlich wie Unic - frontend development-in-complex-projects

Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentIncremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentAkihiro Ikezoe
 
Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform AppsFITC
 
High performance website
High performance websiteHigh performance website
High performance websiteChamnap Chhorn
 
Writing an extensible web testing framework ready for the cloud slide share
Writing an extensible web testing framework ready for the cloud   slide shareWriting an extensible web testing framework ready for the cloud   slide share
Writing an extensible web testing framework ready for the cloud slide shareMike Ensor
 
How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?IWMW
 
Web Components
Web ComponentsWeb Components
Web ComponentsFITC
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationMelanie Archer
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an OverviewMatt Weaver
 
Ensuring Design Standards with Web Components
Ensuring Design Standards with Web ComponentsEnsuring Design Standards with Web Components
Ensuring Design Standards with Web ComponentsJohn Riviello
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Eugenio Minardi
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
One Drupal to rule them all - Drupalcamp London
One Drupal to rule them all - Drupalcamp LondonOne Drupal to rule them all - Drupalcamp London
One Drupal to rule them all - Drupalcamp Londonhernanibf
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance OptimizationChen-Tien Tsai
 
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!Aleks Zinevych
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11Christian Rokitta
 
The new way of managing layouts and blocks
The new way of managing layouts and blocksThe new way of managing layouts and blocks
The new way of managing layouts and blocksIvo Lukac
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalRod Martin
 

Ähnlich wie Unic - frontend development-in-complex-projects (20)

Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentIncremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
 
Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform Apps
 
High performance website
High performance websiteHigh performance website
High performance website
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
Writing an extensible web testing framework ready for the cloud slide share
Writing an extensible web testing framework ready for the cloud   slide shareWriting an extensible web testing framework ready for the cloud   slide share
Writing an extensible web testing framework ready for the cloud slide share
 
How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?
 
Web Components
Web ComponentsWeb Components
Web Components
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Ensuring Design Standards with Web Components
Ensuring Design Standards with Web ComponentsEnsuring Design Standards with Web Components
Ensuring Design Standards with Web Components
 
dmBridge & dmMonocle
dmBridge & dmMonocledmBridge & dmMonocle
dmBridge & dmMonocle
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
One Drupal to rule them all - Drupalcamp London
One Drupal to rule them all - Drupalcamp LondonOne Drupal to rule them all - Drupalcamp London
One Drupal to rule them all - Drupalcamp London
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
 
The new way of managing layouts and blocks
The new way of managing layouts and blocksThe new way of managing layouts and blocks
The new way of managing layouts and blocks
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to Drupal
 

Mehr von Unic

Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...Unic
 
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...Unic
 
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...Unic
 
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen VerkehrDigital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen VerkehrUnic
 
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNWPräsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNWUnic
 
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose GroupDigitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose GroupUnic
 
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...Unic
 
Customer Centricity – Wie geht es weiter? War’s das?
Customer Centricity – Wie geht es weiter? War’s das?Customer Centricity – Wie geht es weiter? War’s das?
Customer Centricity – Wie geht es weiter? War’s das?Unic
 
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’tsCRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’tsUnic
 
Kundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Kundenzentriertheit im internationalen Wettbewerb am Beispiel MultichannelKundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Kundenzentriertheit im internationalen Wettbewerb am Beispiel MultichannelUnic
 
Herausforderungen von Customer Centricity im E-Commerce Alltag
Herausforderungen von Customer Centricity im E-Commerce AlltagHerausforderungen von Customer Centricity im E-Commerce Alltag
Herausforderungen von Customer Centricity im E-Commerce AlltagUnic
 
Keynote: Der Post Logistik-Kunde im Mittelpunkt
Keynote: Der Post Logistik-Kunde im MittelpunktKeynote: Der Post Logistik-Kunde im Mittelpunkt
Keynote: Der Post Logistik-Kunde im MittelpunktUnic
 
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...Unic
 
Customer Experience Highlights am Beispiel Post CH AG
Customer Experience Highlights am Beispiel Post CH AGCustomer Experience Highlights am Beispiel Post CH AG
Customer Experience Highlights am Beispiel Post CH AGUnic
 
Relaunch post.ch – Ein Schritt Richtung digitale Transformation
Relaunch post.ch – Ein Schritt Richtung digitale TransformationRelaunch post.ch – Ein Schritt Richtung digitale Transformation
Relaunch post.ch – Ein Schritt Richtung digitale TransformationUnic
 
Know every customer. Own every experience.
Know every customer. Own every experience.Know every customer. Own every experience.
Know every customer. Own every experience.Unic
 
2015 - a static site generator odyssey
2015  - a static site generator odyssey2015  - a static site generator odyssey
2015 - a static site generator odysseyUnic
 
Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Das grösste E-Banking der Schweiz erneuern – challenge accepted.Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Das grösste E-Banking der Schweiz erneuern – challenge accepted.Unic
 
Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Kundennähe von Banken und Versicherern im Web - Benchmark 2015Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Kundennähe von Banken und Versicherern im Web - Benchmark 2015Unic
 
Trend Spotlight: Marketing Automation
Trend Spotlight: Marketing AutomationTrend Spotlight: Marketing Automation
Trend Spotlight: Marketing AutomationUnic
 

Mehr von Unic (20)

Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
 
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
 
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
 
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen VerkehrDigital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
 
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNWPräsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
 
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose GroupDigitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
 
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
 
Customer Centricity – Wie geht es weiter? War’s das?
Customer Centricity – Wie geht es weiter? War’s das?Customer Centricity – Wie geht es weiter? War’s das?
Customer Centricity – Wie geht es weiter? War’s das?
 
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’tsCRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
 
Kundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Kundenzentriertheit im internationalen Wettbewerb am Beispiel MultichannelKundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Kundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
 
Herausforderungen von Customer Centricity im E-Commerce Alltag
Herausforderungen von Customer Centricity im E-Commerce AlltagHerausforderungen von Customer Centricity im E-Commerce Alltag
Herausforderungen von Customer Centricity im E-Commerce Alltag
 
Keynote: Der Post Logistik-Kunde im Mittelpunkt
Keynote: Der Post Logistik-Kunde im MittelpunktKeynote: Der Post Logistik-Kunde im Mittelpunkt
Keynote: Der Post Logistik-Kunde im Mittelpunkt
 
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
 
Customer Experience Highlights am Beispiel Post CH AG
Customer Experience Highlights am Beispiel Post CH AGCustomer Experience Highlights am Beispiel Post CH AG
Customer Experience Highlights am Beispiel Post CH AG
 
Relaunch post.ch – Ein Schritt Richtung digitale Transformation
Relaunch post.ch – Ein Schritt Richtung digitale TransformationRelaunch post.ch – Ein Schritt Richtung digitale Transformation
Relaunch post.ch – Ein Schritt Richtung digitale Transformation
 
Know every customer. Own every experience.
Know every customer. Own every experience.Know every customer. Own every experience.
Know every customer. Own every experience.
 
2015 - a static site generator odyssey
2015  - a static site generator odyssey2015  - a static site generator odyssey
2015 - a static site generator odyssey
 
Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Das grösste E-Banking der Schweiz erneuern – challenge accepted.Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Das grösste E-Banking der Schweiz erneuern – challenge accepted.
 
Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Kundennähe von Banken und Versicherern im Web - Benchmark 2015Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Kundennähe von Banken und Versicherern im Web - Benchmark 2015
 
Trend Spotlight: Marketing Automation
Trend Spotlight: Marketing AutomationTrend Spotlight: Marketing Automation
Trend Spotlight: Marketing Automation
 

Kürzlich hochgeladen

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 

Kürzlich hochgeladen (20)

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 

Unic - frontend development-in-complex-projects

  • 1. Frontend development in complex projects Frontend Conference Zurich 2012 9th September 2012 Rosmarie Wysseier & Thomas Jaggi
  • 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. 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. 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. What we are going to talk about • Writing maintainable and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 5
  • 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. Agenda • Writing maintainable and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 7
  • 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. probably copyright-protected screenshot of “The Office” Issue #1 HTML code is highly redundant
  • 10. «The customer just told me he wants Click to editform in the header, after this search Master title style all.» – Project manager © Unic - Seite 10
  • 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. Solution • Modularization of the HTML • Our tool of choice: Middleman (http://middlemanapp.com) © Unic - Seite 12
  • 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. Disadvantages • Build process necessary • HTML for one page type spread over many files © Unic - Seite 14
  • 15. probably copyright-protected screenshot of “The Office” Issue #2 CSS is location-dependent
  • 16. «The customer just told me he wants to Click to edit Master the main content to use this teaser in title style area, too.» – Project manager © Unic - Seite 16
  • 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. Solution • Modularization • Approach: OOCSS © Unic - Seite 18
  • 19. «Basically, a CSS “object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, Click and possibly JavaScript. Once CSS, to edit Master title style created, an object can then be reused throughout a site.» – OOCSS (https://github.com/stubbornella/oocss/wiki) © Unic - Seite 19
  • 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. 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. probably copyright-protected screenshot of “The Office” Issue #3 CSS assumes too much about the markup
  • 23. «We can’t strictly implement your Click tostructure, our CMS renders HTML edit Master title style additional tags.» – Backend developer © Unic - Seite 23
  • 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. 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. Disadvantages • Missing out on generally useful selectors • Extra markup © Unic - Seite 26
  • 27. probably copyright-protected screenshot of “The Office” Issue #4 JS is not adequately separated from HTML / CSS
  • 28. «Your JavaScript does not work. How Click to edit Master title style about testing before shipping?» – Backend developer © Unic - Seite 28
  • 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. 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. Solution • Use namespaced classes as your JS “hooks” (i.e. “js-carousel”) • Use data attributes instead of classes © Unic - Seite 31
  • 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. Disadvantages • Performance of attribute selectors • Extra markup © Unic - Seite 33
  • 34. probably copyright-protected screenshot of “The Office” Issue #5 No consistent coding style
  • 35. «I just refactored your multi-line declarations into single-line ones Click to edit Master title style because I like them better.» – Other frontend developer © Unic - Seite 35
  • 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. 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. Disadvantages • Takes a lot of time to develop / agree on • Restricting © Unic - Seite 38
  • 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. probably copyright protected screenshot of “The Office” Strive to make everyone’s life easier.
  • 41. Agenda • Writing maintainable and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 41
  • 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 /collection GET /collection[/id] PUT /collection/id DELETE /collection/id © Unic - Seite 42
  • 43. How can weMaster title style Click to edit mock this data © Unic - Seite 43
  • 44. Mock of REST requests var 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. Mock of REST requests BackboneMock = { "/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. Agenda • Writing maintainable and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 46
  • 47. Who does write unit tests for Click to edit Master title style JavaScript © Unic - Seite 47
  • 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. Agenda • Writing maintainable and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 49
  • 50. Does anybody have a CI server for the Click to edit Master title style frontend © Unic - Seite 50
  • 51. Continuous Integration layout, partials HAML HTML @import "partials/base"; SCSS CSS //= require 'plugins' JS JS Middleman © Unic - Seite 51
  • 52. Continuous Integration Check updates Jenkins SVN Source Ruby server Deploy HTML JS CSS Apache server © Unic - Seite 52
  • 53. Release Management JS Automated Release CSS HTML Adaption in System Mocks Automated Release © Unic - Seite 53
  • 54. © Unic - Seite 54
  • 55. Unic AG Rosmarie Wysseier Belpstrasse 48 Senior Frontend Engineer 3007 Bern Tel +41 31 560 12 12 Thomas Jaggi Fax +41 31 560 12 13 Senior Frontend Engineer bern@unic.com www.unic.com © Unic - Seite 55