Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Feature Development with jQuery


Published on

  • Be the first to comment

  • Be the first to like this

Feature Development with jQuery

  1. 1. Feature Development with jQuery Mike Edwards
  2. 2. About MeMike EdwardsM.S. Computer Science, University of IowaStarted building web applications professionally in 2000JavaScript expert leveljQuery: Started using it about 1.5 years agoUsed extensively since thenIm very interested in common themes across differenttechnologies
  3. 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. 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 pages content as the page is loaded into the users browser● As long as the script doesnt use any of its escalated privileges, it can be loaded directly onto the server for all users
  5. 5. Filter/Sort Demo
  6. 6. Filtering Script:Code Review
  7. 7. Filtering Script:Code Review
  8. 8. Old Lady/Young Lady
  9. 9. Thinking about Perspective● Sometimes the same thing looks very different from another perspective
  10. 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. 11. Source ControlBranching & Merging
  12. 12. Filtering Script:A New Perspective
  13. 13. Merge or Modularize● jQuery "Feature Files" consist of "payload" code and "merge instructions" about where to splice in the payloads● One approach once weve successfully prototyped a new feature is to then manually merge it into the application code-base (Feature Branching/Merge)● Feature Branching is a poor mans 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
  14. 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. 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. 16. MVC Architecture
  17. 17. Modern Web ArchitectureWeb 2.0 Thick-client One-Page App
  18. 18. Web 2.0 & MVC
  19. 19. jQueries Responsibilities
  20. 20. MVC Frameworks
  21. 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. 22. Filtering Plugin:Basic Plugin Framework
  23. 23. Filtering Plugin:Plugin Loader
  24. 24. Filtering Plugin:Model
  25. 25. Filtering Plugin:View
  26. 26. Filtering Plugin:Controller
  27. 27. jQuery Pitfall
  28. 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● Weve re-organized the code by its MVC role, which is a start● Still need to flesh-out and integrate with the underlying application infrastructure
  29. 29. Branch/Merge vs PluginsVersion Control Plugin ArchitectureTrunk Application Core ArchitectureBranch Start New PluginMerge/Patch Load Plugin at Run-timeCherry-picking Enable/Disable Plugins
  30. 30. Conclusion● jQueries power comes, at least partly, from its 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
  31. 31. DiscussionMike