Upload
michael-edwards
View
431
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Feature Developmentwith jQuery
Mike [email protected]
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 [email protected]