Feature Development with jQuery
- 1. Feature Development with jQuery Mike Edwards medwards20x6@gmail.com
- 2. About Me Mike Edwards M.S. Computer Science, University of Iowa Started building web applications professionally in 2000 JavaScript expert level jQuery: Started using it about 1.5 years ago Used extensively since then I'm very interested in common themes across different technologies
- 3. Outline ● Introduction ○ UserScripts: Greasemonkey, Tampermonkey ○ Filtering Script: Demo, Code Review ● Thinking about Perspective ○ Looking at the same thing from a different angle ○ The Perspective of Source Control ○ Filtering Script: From a New Perspective ● A Basic MVC Plugin Architecture ○ Modular Architecture ○ Refactoring: Quick Intro ○ jQuery & MVC ○ Plugin Ecosystems ○ Filtering: Refactored
- 4. User Scripts ● Supporting Add-ons: ○ Greasemonkey, Tampermonkey ● Scripts are installed by the user in their browser, not by a web admin on the server ● User scripts make on-the-fly changes to a web page's content as the page is loaded into the users browser ● As long as the script doesn't use any of it's escalated privileges, it can be loaded directly onto the server for all users
- 9. Thinking about Perspective ● Sometimes the same thing looks very different from another perspective
- 10. Perspective: Computability ● This concept runs right to the bedrock of all Computer Science ● Church/Turing Thesis ○ Lambda Calculus and Turing Machines are equivalent ways of looking at computability ● Electrical Engineering: You can build an entire CPU out of just NAND logic gates. You can also build it out of just NOR logic gates.
- 11. Source Control Branching & Merging
- 12. Filtering Script: A New Perspective
- 13. Merge or Modularize ● jQuery "Feature Files" consist of "payload" code and "merge instructions" about where to splice in the payloads ● One approach once we've successfully prototyped a new feature is to then manually merge it into the application code-base (Feature Branching/Merge) ● Feature Branching is a poor man's modular architecture, instead of building systems with the ability to easy swap in and out features at runtime / deploytime they couple themselves to the source control providing this mechanism through manual merging. -- Dan Bodart http://martinfowler.com/bliki/FeatureBranch.html
- 14. Technical Debt & Refactoring ● Technical Debt: "You have a piece of functionality that you need to add to your system. You see two ways to do it, one is quick to do but is messy - you are sure that it will make further changes harder in the future. The other results in a cleaner design, but will take longer to put in place." - Martin Fowler ● Refactoring: "a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior" - Wikipedia
- 15. Plugin Ecosystems ● Users can decide for themselves via configuration which features they need ● Third-party developers can potentially enhance the value of your product at no cost to you ● An API built for plugins can be used for integration with partner applications and/or used as a backend for additional platforms (mobile web, mobile native)
- 16. MVC Architecture
- 17. Modern Web Architecture Web 2.0 Thick-client One-Page App
- 18. Web 2.0 & MVC
- 20. MVC Frameworks
- 21. jQuery & MVC cont. ● Most "MVC" frameworks focus on "MV" ○ Observable models ○ Template based rendering ○ Data Binding/Automatic re-rendering ● jQuery specializes in "C" with a side of "V" ○ Event Handlers ○ AJAX ○ Powerful ability to update the View in real-time, but no template support or observable models
- 22. Filtering Plugin: Basic Plugin Framework
- 27. jQuery Pitfall
- 28. Refactoring Continued... ● Pitfall: Because jQuery is so good at Querying the view, it can be tempting to simply treat the view as your model. ● This is okay for prototypes and tiny features, but should be refactored when possible ● We've re-organized the code by it's MVC role, which is a start ● Still need to flesh-out and integrate with the underlying application infrastructure
- 29. Branch/Merge vs Plugins Version Control Plugin Architecture Trunk Application Core Architecture Branch Start New Plugin Merge/Patch Load Plugin at Run-time Cherry-picking Enable/Disable Plugins
- 30. Conclusion ● jQueries power comes, at least partly, from it's ability to weave "merge" code inline ● An alternate way to view this is that jQuery provides the infrastructure necessary to create Application level plugins ● Aspect-Oriented Programming as an entire field dedicated to this kind of thinking