THE MODULARIZATION OF WEB CODE

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.