• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Feature Development with jQuery

Feature Development with jQuery






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Feature Development with jQuery Feature Development with jQuery Presentation Transcript

    • Feature Development with jQuery Mike Edwards medwards20x6@gmail.com
    • 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
    • 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
    • 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
    • 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 ○ 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.
    • 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 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
    • 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
    • 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)
    • 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 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
    • 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 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
    • Branch/Merge vs PluginsVersion Control Plugin ArchitectureTrunk Application Core ArchitectureBranch Start New PluginMerge/Patch Load Plugin at Run-timeCherry-picking Enable/Disable Plugins
    • 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
    • DiscussionMike Edwardsmedwards20x6@gmail.com