Front End Tech Talk - Facebook
José M. Pérez / January 30, 2011
4 min read • ––– views
We had about 1MB of JS on the homepage
They realized they had a problem with so much JS code and they worked at different levels to shrink it.
Haste is a package and dependency manager for CSS and JS files. In each file they specify the name of the package provided by the file and those files that are required to run the file. Thus, Haste can manage what files are needed to run a certain script.
This helps managing how files are requested and even which sets of files should be merged. This system was further explained by Xiaoliang "David" Wei at his talk about Static resource management & optimization that took place on December 2010 at Velocity China.
Bootloader consists of a JS library that helps loading and unloading static resources on demand. Not too far of RequireJS or LabJS. It uses dynamic script injection and executes a callback function once the resource is loaded.
The good point is that you can even suggest static resources that are not immediately needed but could be prefetched at background.
they rewrote dialogs as anchors with a rel="dialog" attribute:
Simplified code to mark a link as a dialog
Adding a listener to manage click events on links marked as dialogs
PHP chainable code to create a dialog and set different properties
It is like converting a jQuery widget plugin into an ajax call and let the server generate the widget content.
ajaxify attribute. They also use this
ajaxify attribute to specify that a form should be ajaxified.
Like Makindo says,
All this common interactions are shown in the comments form:
An example of common interactions that in their comment form
The top red arrow indicates that Comment is a label, so clicking on it focuses the comment textarea.
This talk shows that sometimes it is necessary to return to the basic elements and build interactions from there, trying to find common functionality to reduce the code needed, and embracing progressive enhancement as a way to achieve it.