The document discusses converting a desktop website to a mobile-friendly version using JavaScript. It provides an overview of JavaScript and its uses in mobile, including using a single column layout, simplifying navigation and marketing, removing unnecessary JavaScript, and adapting elements for a mobile screen. It then outlines the process of modifying the live DOM to create a shadow DOM optimized for mobile, including activating a mobile CSS stylesheet and removing desktop-specific JavaScript elements. Key aspects are using the Mobify open source JavaScript library and modifying files like capture.js and rebuild.js to transform the original page for mobile viewing.

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_desktopScript
ing");
while(scripts.length > 0){
destroy(scripts[0]);
}
function destroy(node) {
var parent = node.parentNode;
if (node && parent) {
parent.removeChild(node);
}