Upgrade to Pro — share decks privately, control downloads, hide ads and more …

THE MODULARIZATION OF WEB CODE

THE MODULARIZATION OF WEB CODE

Adam Smith

June 13, 2015
Tweet

More Decks by Adam Smith

Other Decks in Programming

Transcript

  1. THE
    MODULARIZATION
    OF CODE
    SCSS, HTML and JAVASCRIPT

    View full-size slide

  2. MODULAR
    PROGRAMMING
    The term "modular programming"
    dates at least to the National
    Symposium on Modular Programming,
    organized at the Information and
    Systems Institute in July 1968.
    http://en.wikipedia.org/wiki/Modular_programming
    Look mom I built a plugin!

    View full-size slide

  3. BASIC CONCEPTS
    Modular programming discourages the use of control variables and flags in parameters.
    Data is passive. Any code may access the contents of any data structure passed to it.
    Source:
    http://c2.com/cgi/wiki?ModularProgramming, http://c2.com/cgi/wiki?WhatIsModularity

    View full-size slide

  4. MANAGERS & WORKERS
    Modular programming tends to encourage splitting of functionality into two types: "Manager"
    functions control program flow and primarily contain calls to "Worker" functions that handle low-
    level details.
    “If you could get these tickets marked
    as fixed that would be great.”
    -Manager

    View full-size slide

  5. WORKER’S RIGHTS
    8 HOUR WORK DAY == CODE ONLY DOES SO MUCH
    Breaking down task into smaller functions does increase the
    management level but it also increases efficiency in a project
    life cycle.
    If your MVC Controller function is 500 lines long
    it’s doing too much!
    If your jQuery $(document).ready() callback is 500 lines
    it’s doing too much!
    If your view file logic has a never ending if/else statement
    it’s doing too much!

    View full-size slide

  6. IN THE
    REAL WORLD
    Object oriented languages have an intrinsic modular
    lifecycle. Other technologies do not offer the same luxuries.
    CSS could care less about your modular
    agenda. It’s you who makes the rules,
    it’s you who breaks the rules.
    Any great warrior is also a scholar, and a
    poet, and an artist.
    Steven Seagal

    View full-size slide

  7. SCSS DEPTH
    The more depth, the less modular. The deeper you
    go into the abyss, the less likely you are to survive.
    Imagine each wrapper or special class as a layer
    of modular complexity.

    View full-size slide

  8. HTML COMPLEXITY
    CSS is reflective of the html hierarchy. The more
    html elements and attribute nodes, the less
    performant AND the less modular.

    View full-size slide

  9. JAVASCRIPT & STYLES
    Thanks to modern CSS transitions and animations javascript no longer
    manipulates the attribute’s style property. The modern and modular technique
    involves adding and removing classes to set UI states. The states defined by
    the class names contain the animation and transition properties.
    OLD MODERN

    View full-size slide

  10. LEVELS OF ABSTRACTION
    Modular programming will have at
    least one level of abstraction. The
    more levels of abstraction, the
    greater the learning curve to
    understanding.
    If the levels of abstraction become
    too great, the positives of modular
    programming get outweighed by the
    complexity.

    View full-size slide

  11. IN CLOSING...
    When building large websites try to decouple your styles from your javascript.
    Stack classes in semantic groups for readability and reuse. Be wary of the
    levels of abstraction vs the benefits to the end product.

    View full-size slide