Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Marco Casario - Codemotion...
-
Upload
codemotion -
Category
Technology
-
view
1.648 -
download
3
description
Transcript of Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Marco Casario - Codemotion...
Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3
Marco CasarioCTO Comtaste - [email protected]
Wednesday, December 3, 14
Chi sono
Www.Marcocasario.Com 2
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario
Wednesday, December 3, 14
I miei ulCmi libri
Www.Marcocasario.Com 3
Wednesday, December 3, 14
I miei corsi
Www.Marcocasario.Com 3
training.codemotion.it
Wednesday, December 3, 14
AGENDA
Wednesday, December 3, 14
Agenda
Www.Marcocasario.Com 28
Best PracCces
OpCmizaCons
Wednesday, December 3, 14
WHAT MAKES YOU A FRONTEND NINJA DEVELOPER
Wednesday, December 3, 14
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Velocity
What are the the ingredients of a Frontend Developer Ninja ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Languages + Libraries + Frameworks
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Page weight grows
http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Apr+1+2014#bytesTotal&reqTotal
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Mobile Devices & Large Screens
Www.Marcocasario.Com 28
https://www.flickr.com/photos/lukew
Wednesday, December 3, 14
Velocity
Desktop users are more or less satisfied with the status quo (but pages are going bigger)
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Measuring the load Cme
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Velocity
DISCLAIMER.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
OPTIMIZATIONS
Wednesday, December 3, 14
Why is it important ?
Www.Marcocasario.Com 28
Start from Page Insights
Wednesday, December 3, 14
Why is it important ?
You can’t optimize what you can’t measure
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Why is it important ?
Learning how the browsers load your web pages, helps you:
make better decisions, justify the approaches and the development best practices.
-- Paul Irish
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Browser’s rendering flow
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Browser’s rendering flow
It’s not a linear flow.
Each time a resource needs to be downloaded, it blocks the
rendering.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
In order to optimize you:
1. identify & mesure a scenario2. define what the fastest you
can get is
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
The Speed Index
Www.Marcocasario.Com 28
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
Wednesday, December 3, 14
How to opCmize
The Speed Index is the average time at which visible parts of the page are
displayed. It is expressed in milliseconds and dependent on size of
the view port.
It measures when pixels are shown on screen.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
The Speed Index is the "area above the curve" calculated in ms and using 0.0-1.0
for the range of visually complete.
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
The Speed Index is the "area above the curve" calculated in ms and using 0.0-1.0
for the range of visually complete.
Wednesday, December 3, 14
How to opCmize
Identify the Load Time & the End of Activity
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Get a visual representation of the user’s perception of what’s
happening
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
http://www.webpagetest.org/video/compare.php?tests=140410_4Y_KVY-r:1-c:0
Wednesday, December 3, 14
How to opCmize
Focus on:
the speed index valuethe total load time
the render timethe bandwidth
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Is the bandwidth so important for faster pages ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
For getting fast pages, what is the right number of requests
and optimal page size ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Measuring performance by the KB is like measuring effectiveness of your
diet by the pound.
Measuring performance by the number of requests is like measuring your diet by number of things you ate - in both
cases, who cares about what you actually ate, right ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Moreover, not all requests are made equal.
Where are they initiated? What part of the UX do they
block ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Moreover, not all the bytes are made equal.
Bytes of different content-types have different impact on
performance.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
What's the critical path on loading a page ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Bandwidth + Latency = Performance
Www.Marcocasario.Com 28
Wednesday, December 3, 14
BEST PRACTICES
Wednesday, December 3, 14
Velocity
Take your time to code.
When you invest time you can get closer to a core of a
problem.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
600 ms of time has already been used up by network overhead: a DNS lookup to resolve the hostname (e.g. google.com) to an IP address, a
network roundtrip to perform the TCP handshake, and finally a full network roundtrip to send the HTTP request. This leaves us with just 400 ms!
Wednesday, December 3, 14
How to opCmize
OUR GOAL
To give the Perception of page loading in 200ms
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
You need to understand the components of an HTTP
request
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
1. DNS lookup to resolve the hostname to IP address
2. New TCP connection requires a handshake roundtrip to the server
3. HTTP request requires minimum of a one roundtrip to the server plus server
processing time
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
http://www.webpagetest.org/result/140410_XJ_CHT/1/details/
Wednesday, December 3, 14
How to opCmize
Focus on:
DNS LookupTCP connectionHTTP requests
Bandwidth used
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
What does it happen when there is a gap in the bandwidth
chart ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#LATENCY_BOTTLENECK
Wednesday, December 3, 14
How to opCmize
Latency is the performance bottleneck for HTTP as well as
all the web.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Focus on how resources that are requested from a different origin consume network time
http://www.webpagetest.org/video/compare.php?tests=140410_AT_DST-r:1-c:0
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
What will your gain be if you load zeptojs instead of Jquery ?
What if you reduce the blocking resources and make parallel
loading ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
How can you write better code to render the page faster ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Stop Spamming
http://idontwantyourfuckingapp.tumblr.com/Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Eliminate render-blocking JS
Load JS asynch
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
<script src="file.js" defer></script>
<script src="file.js" async></script>
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Use a library like RequireJS
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Pay Attention to Media Queries
They block the rendering of the page
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Pay Attention to Media Queries
1. Load Media Queries CSS async (inject <LINK> after rendering)
2.Mix server-side detection with RWD (WURLF or DeviceAtlas)
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Web Fonts are render blocking
Defer loading after first rendering
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Cache content
Use Application Cache for critical content
IndexedDB on iOS 8
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Double check the size of the Cookies
(Resources Tab of the Dev Tools)
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Serve the content in the initial part of html
Avoid redirects for html
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Use Gzip.
http://www.gidnetwork.com/tools/gzip-test.php
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
No really, Use Gzip.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Don't F*#k Around, use gzip.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Have a look at SPDY: An experimental protocol for a
faster web
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Minimize your JavaScript and CSS files.
It's easy and it can be automated.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Minimize render-blocking CSS: separate critical from non
critical CSS if your CSS payload is larger that 15kb
Avoid including large data URIs
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Talking about rendering, how you can write better CSS to
render the page faster ?
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
External CSS stylesheets are render-blocking, meaning the
browser won’t paint content to the screen until all of your CSS – specifically, media=’screen’
CSS – arrives.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
The solution to this is inlining the initially needed (above-the-
fold) CSS for your page and loading the rest of your CSS
when the page is ready.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Inline CSS
Ready and available for the page.
Single HTTP request to view content.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Inline CSS
Shave 500-700 ms off start rendering the
DOMContentReady
Use only for the critical CSS
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
How can you define your critical content?
What the user expects to first see on the page when it’s
loaded.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Loss Of Caching
Inlining the content makes the code not cacheable and the resources are re-downloaded every time.
The first page load on a new site may be faster, but subsequent pages or return visitors would experience a slower page load.
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
First Visit Inlining On the first visit, inline the critical CSS and set a cookieOnce the page loads, download all the resources as individual files, or store the data into a Scriptable Cache (http://www.blaze.io/technical/browser-cache-2-0-scriptable-cache/)
If a user visits the page and has the cookie, assume it has the files in the cache, and don’t inline the data.
http://addyosmani.github.io/basket.js/
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Load CSS from local storage
http://addyosmani.github.io/basket.js/
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Remove orphan CSS statements.
www.sitepoint.com/dustmeselectors/
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Op9mize images
Use the Sprite technique.
h>p://alistapart.com/ar9cle/spritesh>p://spriteme.org/
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Use the icon fonts
h>p://icomoon.io/
Wednesday, December 3, 14
How to opCmize
Compress images
http://imageoptim.pornel.net/http://developer.yahoo.com/yslow/smushit/
http://pmt.sourceforge.net/pngcrush/
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Wednesday, December 3, 14
How to opCmize
Www.Marcocasario.Com 28
Wednesday, December 3, 14
AUTOMATING & TESTING
Wednesday, December 3, 14
Author, TesCng, Automate
Use the right tool to author, testing and automate
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Yeoman
Www.Marcocasario.Com 28
It’s a tool to help optimize your workflow when developing web applications
http://www.yeoman.io
Wednesday, December 3, 14
Yeoman
Www.Marcocasario.Com 28
Wednesday, December 3, 14
YeomanBefore Yeoman
Make a list of libraries to use in your project (es. Bootstrap, HTML5 Boilerplate, Backbone etc)Download the libraries Organize the foldersInclude the libraries to the projectWrite the codeMaintain and update the libraries
Www.Marcocasario.Com 28
Wednesday, December 3, 14
YeomanWith Yeoman
yo webapp
HTML5 BoilerplateTwitter BootstrapProject StructureRequireJS (optional)Modernizr (optional)Build process...
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Yeoman
yo webapp # scaffold out a skeleton web app project
bower install underscore # install a dependency for your project from Bower
grunt # build the application for deployment
Www.Marcocasario.Com 28
Wednesday, December 3, 14
YeomanOne of the sub-tsk that Grunt executes is the -usemin that makes the following:
<!-- build:js scripts/main.js --><script src="bower_components/jquery/jquery.js"></script><script src="scripts/main.js"></script><!-- endbuild -->
After your grunt build task completes, you will end up with this:
<script src="scripts/c155266f.main.js"></script>
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Yeoman
Www.Marcocasario.Com 28
Bower is a package manager for web application
www.bower.io
Wednesday, December 3, 14
Yeomanbower.json
{ "name": "yowebapp", "version": "0.1.0", "dependencies": { "sass-bootstrap": "~3.0", "requirejs": "~2.1.4", "jquery": "~1.9.1", "angular":"1.0.7" }, "devDependencies": {}}
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Chrome Dev ToolsChrome Developer Tools
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Chrome Dev ToolsRemote Debugging
Www.Marcocasario.Com 28
Wednesday, December 3, 14
Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3
Marco CasarioCTO Comtaste - [email protected]
Wednesday, December 3, 14