MarkUs Blog

MarkUs Developers Blog About Their Project

Migrating Prototype to jQuery – MarkUs Term Goal Winter 2013

without comments

My long term goal for MarkUs will be to port over our Prototype framework code to jQuery. I have had to do some research on this to find out how complex will this be and what is involved. Here are my findings.

Complexity

Since jQuery has such a huge developer community around it, finding replacement plugins for some of Prototypes features should not be hard. The MarkUs code base will have to undergo:

  • A complete Prototype code refactoring to jQuery. Refactoring javascript_include_tags to include jQuery, modifying Prototype creation code for Modals, Windows, Tabs (Included under the LivePipe UI Framework) and Prototype feature detection code blocks.
  • New plugins (jQuery equivalent) if no other substitutes can be found
  • Tests. It seems that as of right now only Functional and Unit tests are up to date in MarkUs. Acceptance tests may have to be written using Cucumber, in which case we can also include Javascript testing as a part of Cucumber.
  • Documentation. I want to document everything I create, most frequently used methods, and any plugins / extensions used for jQuery.

Major Differences Between Prototype & jQuery Syntax

Dollar Variable Selectors

  • Prototype uses $ for ID based selections
  • jQuery uses $ as a CSS based selector (Equivalent to $$ in Prototytpe)

DOM Ready Event

  • Prototype uses an Event object
  • 2 different ways to do this exist in jQuery

DOM Manipulation and Traversal

  • Different methods exist within each framework.

Events

  • Prototype uses Event class methods.
  • jQuery uses bind, unbind, and various other shortcut methods.

Ajax Requests

  • Different syntax between the two frameworks.

Tasks needed to complete

Going over the source code of MarkUs quickly, here are some tasks I see right away that need to be completed.

Replace UI Elements Created by LivePipe

The jQueryUI library may have to be used in order to replace what was provided by the LivePipe library. LivePipe and associated libraries, such as scriptaculous provided:

  • Tabs
  • Windows (Modals)
  • Dragging
  • Dropping
  • Sorting

As a result of this, some of the basic UI elements such as modal dialogs, draggable lists, tabs, may look just a little bit different.

Port over Prototype Classes to jQuery

Prototype is very OOP oriented and abstracts Javascripts prototype (different from the framework) functionality. jQuery requires you to use Javascript’s prototype functionality to extend jQuery and create your own custom objects.

Replace Prototype Feature Detection

Cases such as the following will need to be ported over to jQuery.

<%# Alert Internet Explorer users of incompatibility %>
      if (Prototype.Browser.IE) {

The Modernizer framework can be used in case jQuery lacks any advanced feature detection methods that Prototype may contain.

Written by Marc Bodmer

January 27th, 2013 at 5:14 pm

Posted in Uncategorized

Leave a Reply