Replace jQuery with Zepto.js or X

[brianbaker]

jQuery 1.8.3 minified which is compiled into F2.js is 94KB out of a total 146KB in f2.min.js. Zepto is 9.7KB minified. Obviously, more unit tests will be needed for this update.

[Ali-Khatami]

Zepto.js is enticing, but doesn't appear to support IE. Directly from their home page: "In short, Zepto is expected to work in every modern browser and browser-like environment, except for Internet Explorer."

Target platforms

Desktop browsers

• Safari 5+ (Mac, Win)
• Chrome 5+ (Win, Mac, Linux, Chrome OS)
• Mozilla Firefox 4+ (Win, Mac, Linux)
• Opera 10+ (Win, Mac, Linux)

Mobile browsers

• iOS 4+ Safari
• Chrome for Android
• Chrome for iOS
• Android 2.2+ Browser
• webOS 1.4.5+ Browser
• BlackBerry Tablet OS 1.0.7+ Browser
• Amazon Silk 1.0+
• Firefox for Android
• Firefox OS Browser
• Practically any WebKit-based browsers/runtimes

Maybe we could offer a lighter version of F2 if IE support is not required, using zepto or similar? Not really the best idea as it would introduce fragmentation, but something to consider if we can't find a great alternative.

[brianbaker]

Nice catch, definitely did not see that before.

A while back, I compiled a list of where/how jQuery is used inside of F2.js. Here is that list:

• F2.js
  • inArray
• container.js
  • _afterAppRender - appending the html to the ; adds the F2.Constants.Css.APP class to the App’s containing element
  • _appRender - adds the F2.Constants.Css.APP_CONTAINER class and the App’s AppID to the App’s containing element
  • _initAppEvents - binds click delegate to F2.Constants.Css.APP_VIEW_TRIGGER to handle view changes
  • _initContainerEvents - binds resize event to notify apps that the container’s width has changed
  • _loadApps - $.each; $.ajax
  • getContainerStat - $.map
  • removeApp - fades out the app and removes it from the DOM
• rpc.js
  • _createContainerToAppSocket - creates EasyXDM socket, given a DOM Element
  • isRemote - checks for the existence of an iframe
• ui.js
  • _updateHeight - calculates the height of an App and sets the height of the iframe, if the app is running remotely
  • alert - binds to ‘show’ (Bootstrap) event and attaches click events to handle the closing of the alert
  • confirm - binds to ‘show’ (Bootstrap) event and attaches click events to handle the ok/cancel of the confirm
  • hideMask - removes the F2.Constants.Css.MASK element and removes the F2.Constants.Css.MASK_CONTAINER class from the container
  • showMask - adds an F2.Constants.Css.MASK element to the DOM inside of the container and applies various CSS properties
  • setTitle - if an F2.Constants.Css.APP_TITLE class is found, applies the given title using $.text()
  • Views.change - show/hide views
• Bootstrap:
  • $.modal
• Misc:
  • $.noop
  • $.each
  • $.ajax
  • $.map

[markhealey]

This is a duplicate, closing in favor of #39.