Feature Development    with jQuery        Mike Edwards        medwards20x6@gmail.com
About MeMike EdwardsM.S. Computer Science, University of IowaStarted building web applications professionally in 2000JavaS...
Outline● Introduction  ○ UserScripts: Greasemonkey, Tampermonkey  ○ Filtering Script: Demo, Code Review● Thinking about Pe...
User Scripts● Supporting Add-ons:   ○ Greasemonkey, Tampermonkey● Scripts are installed by the user in their  browser, not...
Filter/Sort Demo
Filtering Script:Code Review
Filtering Script:Code Review
Old Lady/Young Lady
Thinking about Perspective● Sometimes the same thing looks very  different from another perspective
Perspective: Computability● This concept runs right to the bedrock of all  Computer Science● Church/Turing Thesis   ○ Lamb...
Source ControlBranching & Merging
Filtering Script:A New Perspective
Merge or Modularize● jQuery "Feature Files" consist of "payload" code and    "merge instructions" about where to splice in...
Technical Debt & Refactoring● Technical Debt:        "You have a piece of functionality that you need to add to your syste...
Plugin Ecosystems● Users can decide for themselves via  configuration which features they need● Third-party developers can...
MVC Architecture
Modern Web ArchitectureWeb 2.0 Thick-client    One-Page App
Web 2.0 & MVC
jQueries Responsibilities
MVC Frameworks
jQuery & MVC cont.● Most "MVC" frameworks focus on "MV"   ○ Observable models   ○ Template based rendering   ○ Data Bindin...
Filtering Plugin:Basic Plugin Framework
Filtering Plugin:Plugin Loader
Filtering Plugin:Model
Filtering Plugin:View
Filtering Plugin:Controller
jQuery Pitfall
Refactoring Continued...● Pitfall: Because jQuery is so good at  Querying the view, it can be tempting to  simply treat th...
Branch/Merge vs PluginsVersion Control   Plugin ArchitectureTrunk             Application Core ArchitectureBranch         ...
Conclusion● jQueries power comes, at least partly, from  its ability to weave "merge" code inline● An alternate way to vie...
DiscussionMike Edwardsmedwards20x6@gmail.com
Upcoming SlideShare
Loading in …5
×

Feature Development with jQuery

344
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
344
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Feature Development with jQuery

  1. 1. Feature Development with jQuery Mike Edwards medwards20x6@gmail.com
  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 http://martinfowler.com/bliki/FeatureBranch.html
  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 Edwardsmedwards20x6@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×