1. Welcome to OS mobile JavaScript
Tuesday September 8th 2014

2. What is JavaScript?
 Client-side scripting that allows manipulation of
the Document Object Model
 DOM includes
 CSS includes <link href="style.css/>
 JS includes <script src="file.js"/>
 All elements <div><h1>Title</h1></div>
 All current browsers support it
 If not disabled

3. What Mobile Needs
 1 column layout
 New navigation
 Marketing tweaks
 Fewer lines of JavaScript
 No Flash media
 No Mouse events
 No Modals

4. Why JavaScript?
 Fastest way for us to get mobile done
 Good split of designer & developer time
 No server configuration
 No duplicate code or URLs
 JavaScript already necessary
 Tools already exist

5. Broad Overview
 Check if they need mobile
 White out the page
 Reorganize things
 Remove Desktop JavaScript
 Alter HTML elements (add/delete/move)
 Add Mobile CSS and JS
 Render page

6. Who is Mobile?
function useMobileView() {
var d = document, c = d.cookie;
if (d.documentElement.classList == undefined) return 0;
if (c.indexOf("MobileView=") > -1) return (c.indexOf("MobileView=1") > -1);
return screen.width <= 760;
}
 Browsers that support classList
 Safari 5.1, Android 3, IE10, FF3.6, Chrome 8
 Users with explicit cookies
 Screen width of 760px or smaller

7. Mobify
 Mobify is a paid service for turning Desktop
websites mobile with Open Sourced JS
 We modified the capture.js bit from their /src
 https://github.com/mobify/mobifyjs
 Process
 Hides live DOM (w/ <plaintext
style=”display:none”>)
 Creates shadow DOM (w/ callback)
 Replaces live DOM with shadow DOM (w/ callback)

8. Why Does it Work?
 JavaScript is loaded/run as it happens
 JavaScript doesn't care about the future, only
the past
 You can tell JavaScript to run after events
happen, but that's outside the scope

9. Our JS Files
 capture.js from Mobify
 rebuild.js modifies the
shadow DOM
 loaded.js registers
onload of the shadow
DOM onload event
 onload/*.js files do
normal JS things

10. rebuild.js I
 Activates Mobile CSS
<link href="/css/everything.css?eba5c95" rel="mobile-style"
type="text/css" id="jx_mobileStyles" />
Transmutes to
<link href="/css/everything.css?eba5c95" rel="stylesheet"
type="text/css" id="jx_mobileStyles" />
 Is put at the bottom of the HEAD
 Overrides previous styles

11. rebuild.js I Code
var head = doc.getElementsByTagName("head")[0];
// Activate mobile style sheet and place it
// at the bottom of the head
var style = doc.querySelector("#jx_mobileStyles");
style.setAttribute("rel", "stylesheet");
head.appendChild(style);

12. rebuild.js II
 Removes JavaScript that the Desktop uses
 Including MooTools and CeraBox
 Any elements using the class
“jx_desktopScripting” are removed
Ex:
<script type="text/javascript"
src="/assets/js/mootools.js"
class="jx_desktopScripting"></script>

13. rebuild.js II Code
// Remove our desktop JavaScript
var
scripts=doc.getElementsByClassName("jx_desktopScri
pting");
while(scripts.length > 0){
destroy(scripts[0]);
}
function destroy(node) {
var parent = node.parentNode;
if (node && parent) {
parent.removeChild(node);
}
}