THE MODULARIZATION OF WEB CODE

THE MODULARIZATION OF WEB CODE

A3c3d8a2b363c794bf2f0da138fb9684?s=128

Adam Smith

June 13, 2015
Tweet

Transcript

  1. THE MODULARIZATION OF CODE SCSS, HTML and JAVASCRIPT

  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!
  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
  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
  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!
  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
  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.
  8. HTML COMPLEXITY CSS is reflective of the html hierarchy. The

    more html elements and attribute nodes, the less performant AND the less modular.
  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
  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.
  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.