OPTIMIZATION TIPS AND TRICKS in building Enterprise Grade JavaScript Web Applications By Patrick Ifeora Okechukwu #JS #FrontEnd 

ABOUT THE SPEAKER • Twitter – https://www.twitter.com/isocroft • Facebook – https://www.facebook.com/ifeora.okechukwu • GitHub – https://www.github.com/isocroft • LinkedIn – https://www.linkedin.com/in/ifeora-okechukwu-a3b30b69 Unrepentant Internet addict, Open-Source Junkie and Developer Advocate @Coolcodes https://web.facebook.com/coolcodes. Works at @MobileForms https://www.mobileforms.co. #BestPractices #WebApplications #ScalableArchitecture 

AGENDA • AntiClickJacking Snippet (X-Frame-Options + Content-Security-Policy) • Loading Scripts (Async / Defer) + Non-Blocking Scripts • JS Concatenation + Minification + Source Maps • JavaScript CPU Profiling and Debugging with BreakPoints + debugger; statement • Handling Session Timeouts with BlindScreen Feature + storage events + Cross- Tab Communication. • WebWorkers for AJAX and SERVERPUSH (Multithreading benefits) • Defensive Programming in JS (an argument for dynamic typed languages) • Tricks in JS coding • Closing Off • Q/A 

MOBILEFORMS Data Collection Made Easy !!!!! • On-demand Data Verification & Cleanup • Data (Big Data) Analytics (for creating BI info) • Data Visualization & Mapping • Primary Data Collection (Online & Offline) Visit us at https://www.mobileforms.co 

ANTI-CLICKJACKING What is Anti-Clickjacking ? It is a set of measures that are implemented on a webpage to stop an attacker/hacker from exploiting a web page using a technique known as “clickjacking”. Clickjacking a.k.a “UI redress attack” is when an attacker use single or multiple transparent or opaque layers (of DOM elements) to trick a user into clicking a button or link while they actually click a top level page that is transparent. We use a “frame-bursting” JavaScript code in implementing AntiClickJacking (live coding – 2mins) 

Frame-bursting code 

CSP meta tags 

LOADING SCRIPTS (ASYNC / DEFER) IN LARGE AMOUNTS 1. We all know scripts can be loaded in the head or body 2. We all know we should load scripts in order especially scripts with dependencies 3. We all know we can make scripts load without blocking rendering by loading it asynchronously. 4. We all know we can make our pages load faster by loading the scripts in the body 5. We all know we can use async attribute on the scripts in the head to make them load asynchronously and not block page rendering. 6. We all know we can use defer attribute on the scripts in the head to delay download and execution until after the document is ready 7. What about script order in cases (5) and (6) ? (live coding – 5mins) 

Use defer on scripts in IE 8/9 

Use async on script in IE 10 and others 

Minification + Sourcemaps (DEVTOOLS) So, we all know about minification and its’ benefits in making our web pages load faster and reduce payload for static resources from the server plus faster execution. But what about debugging ? ESKUSE SIR, SO, NO ONE HAS EVER DEBUGGED MINIFIED JAVASCRIPT BEFORE ??? #issoriat Source maps to the rescue!!! lets’ take a look at what is possible with this piece of technology… (live coding – 5mins) 

Enable sourcemaps within Chrome DevTools Fistly, open up the dev- tools panel. Then go to settings 

JavaScript CPU Profiling + Debugging (DEVTOOLS) Profile What ?? Why ?? Well, it turns out that there are times when you must have taken a benchmark for your application using a tool like JMeter and things don’t seem to be running as fast as you anticipated. So, what to do ? Well apart from server-side profiling which you could do with a myriad of active or passive profilers to choose from. You can also profile JavaScript to determine the areas/parts of your code that are taking the most time (unnecessarily) to run and make changes based on that valuable information using flame charts and heavy views 

Handling Session Timeouts BlindScreens Me: While developing a web application, what do you do with the user session when the user has been inactive for quite some time ?? ASP.NET Dev: I just set session timeout on the server and the user has to login ( again & again & again & again & again …) ehen! Me: Don’t you think this will hurt user experience ? ASP.NET Dev: That one no con-sign me oooooo !!!! Me: See bros, you can handle this with JavaScript in a better way oooo. By using BlindScreens. Let me show you ! (live coding – 12mins) 

WebWorkers (AJAX & SERVER-PUSH) What one kom be webworkers again ?? A web-worker is a snippet of JavaScript code packaged in a file that runs in the background independently of other scripts without affecting the performance of a web page. This script actually runs in another separate thread of execution utilizing the other cores of the processor (if any). Let’s see an example! (live coding – 10min) 

Working with workers 

Creating a worker file (worka.js) 

NB: Only IndexedDB, XMLHttpRequest and EventSource works within a web worker. webSQL, localStorage, DOM aren’t accessible from within a web worker. There are also SharedWorker(s) and serviceWorker(s) which are a type of web workers 

EventSource (server-sent events) 

PHP server response to EventSource 

Defensive Programming in JavaScript What the hell is defensive Programming ? According to Wikipedia: Defensive programming is a form of defensive design intended to ensure the continuing function of a piece of software under unforeseen circumstances especially surprise type coersion/conversion. • Liniting/Static Analysis (JSLint, Flow, TypeScript) • Wrap and Encapsulate every JS code (IIFE) • Immutability matters (but not for every variable, use constants when you need to) • Assertions (defending against type errors) • Test your defenses in your testing phase 

Tips in JS code 1. Passing a function as an argument within a loop 2. Updating an ES6 class at runtime 3. Neat tricks with JSON.stringify(); 

Updating an ES6 class at runtime 

JSON.stringify(object, replacer, formatter) 

THANKS FOR LISTENING You just gotta love JavaScript!!