Feature Developmentwith jQuery

Mike Edwardsmedwards20x6@gmail.com

About Me

Mike EdwardsM.S. Computer Science, University of IowaStarted building web applications professionally in 2000

JavaScript expert leveljQuery: Started using it about 1.5 years agoUsed extensively since then

I'm very interested in common themes across different technologies

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 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

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 Control

Branching & Merging

Filtering Script:A New Perspective

● 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

Merge or Modularize

● 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

Technical Debt & Refactoring

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 Architecture

Web 2.0 Thick-clientOne-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

● 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

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

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

Discussion

Mike Edwardsmedwards20x6@gmail.com