85
Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 Marco Casario CTO Comtaste - [email protected] Friday, April 11, 14

Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Embed Size (px)

DESCRIPTION

Slides from Marco Casario talk @ codemotion roma 2014

Citation preview

Page 1: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Become  a  Frontend  Developer  Ninja  using  HTML5,  JavaScript  and  CSS3

 

Marco CasarioCTO Comtaste - [email protected]

Friday, April 11, 14

Page 2: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Chi  sono

Www.Marcocasario.Com 2

Marco Casario

CTO Comtaste

www.linkedin.com/in/marcocasario

Friday, April 11, 14

Page 3: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

I  miei  ulCmi  libri

Www.Marcocasario.Com 3

Friday, April 11, 14

Page 4: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

I  miei  corsi

Www.Marcocasario.Com 3

HTML5, RWD, JS

training.codemotion.it

Friday, April 11, 14

Page 5: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

AGENDA

Friday, April 11, 14

Page 6: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Agenda

Www.Marcocasario.Com 28

AutomaCng  &  TesCng

Best  PracCces

OpCmizaCons

Friday, April 11, 14

Page 7: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

WHAT  MAKES  YOU  A  FRONTEND  NINJA  DEVELOPER  

Friday, April 11, 14

Page 8: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 9: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Languages  +  Libraries  +  Frameworks

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 10: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Velocity

What are the the ingredients of a Frontend Developer Ninja ?

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 11: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Page  weight  grows

http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Apr+1+2014#bytesTotal&reqTotal

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 12: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Mobile  Devices  &  Large  Screens

Www.Marcocasario.Com 28

https://www.flickr.com/photos/lukew

Friday, April 11, 14

Page 13: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Velocity

Desktop users are more or less satisfied with the status quo (but pages are going bigger)

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 14: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Measuring  the  load  Cme

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 15: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Velocity

Take your time to code.

When you invest time you can get closer to a core of a

problem.

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 16: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Velocity

DISCLAIMER.

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 17: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

OPTIMIZATIONS

Friday, April 11, 14

Page 18: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Why  is  it  important  ?

You can’t optimize what you can’t measure

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 19: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 20: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Browser’s  rendering  flow

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 21: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 22: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 24: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 25: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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.

Friday, April 11, 14

Page 26: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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.

Friday, April 11, 14

Page 27: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Identify the Load Time & the End of Activity

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 28: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 29: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Get a visual representation of the user’s perception of what’s

happening

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 30: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

http://www.webpagetest.org/video/compare.php?tests=140410_4Y_KVY-r:1-c:0

Friday, April 11, 14

Page 31: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Focus on:

the speed index valuethe total load time

the render timethe bandwidth

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 32: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Is the bandwidth so important for faster pages ?

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 33: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

For getting fast pages, what is the right number of requests

and optimal page size ?

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 34: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 35: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 36: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 37: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

What's the critical path on loading a page ?

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 38: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Bandwidth + Latency = Performance

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 39: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

You need to understand the components of an HTTP

request

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 40: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 42: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Focus on:

DNS LookupTCP connectionHTTP requests

Bandwidth used

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 43: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

What does it happen when there is a gap in the bandwidth

chart ?

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 44: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#LATENCY_BOTTLENECK

Friday, April 11, 14

Page 45: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Latency is the performance bottleneck for HTTP as well as

all the web.

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 46: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 47: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 48: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

How can you write better code to render the page faster ?

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 49: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Eliminate render-blocking JS

Load JS asynch

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 50: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

<script src="file.js" defer></script>

<script src="file.js" async></script>

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 51: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Use a library like RequireJS

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 52: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Double check the size of the Cookies

(Resources Tab of the Dev Tools)

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 53: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Serve the content in the initial part of html

Avoid redirects for html

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 54: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Use Gzip.

http://www.gidnetwork.com/tools/gzip-test.php

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 55: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

No really, Use Gzip.

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 56: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Don't F*#k Around, use gzip.

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 57: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Have a look at SPDY: An experimental protocol for a

faster web

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 58: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 59: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Minimize your JavaScript and CSS files.

It's easy and it can be automated.

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 60: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 61: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Talking about rendering, how you can write better CSS to

render the page faster ?

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 62: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 63: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 64: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Inline CSS

Ready and available for the page.  

Single HTTP request to view content.

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 65: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Inline CSS

Shave 500-700 ms off start rendering the

DOMContentReady

Use only for the critical CSS

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 66: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 67: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Load CSS from local storage

http://addyosmani.github.io/basket.js/

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 68: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

Remove  orphan  CSS  statements.

www.sitepoint.com/dustmeselectors/

Friday, April 11, 14

Page 69: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

Op9mize  images

Use  the  Sprite  technique.

h>p://alistapart.com/ar9cle/spritesh>p://spriteme.org/

Friday, April 11, 14

Page 70: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

Use  the  icon  fonts

h>p://icomoon.io/

Friday, April 11, 14

Page 71: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Compress images

http://imageoptim.pornel.net/http://developer.yahoo.com/yslow/smushit/

http://pmt.sourceforge.net/pngcrush/

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 72: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

How  to  opCmize

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 73: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

AUTOMATING  &  TESTING

Friday, April 11, 14

Page 74: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Author,  TesCng,  Automate

Use the right tool to author, testing and automate

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 75: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Yeoman

Www.Marcocasario.Com 28

It’s a tool to help optimize your workflow when developing web applications

http://www.yeoman.io

Friday, April 11, 14

Page 76: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Yeoman

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 77: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 78: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

YeomanWith Yeoman

yo webapp

HTML5 BoilerplateTwitter BootstrapProject StructureRequireJS (optional)Modernizr (optional)Build process...

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 79: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 80: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 81: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Yeoman

Www.Marcocasario.Com 28

Bower is a package manager for web application

www.bower.io

Friday, April 11, 14

Page 82: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

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

Friday, April 11, 14

Page 83: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Chrome  Dev  ToolsChrome Developer Tools

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 84: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Chrome  Dev  ToolsRemote Debugging

Www.Marcocasario.Com 28

Friday, April 11, 14

Page 85: Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Become  a  Frontend  Developer  Ninja  using  HTML5,  JavaScript  and  CSS3

 

Marco CasarioCTO Comtaste - [email protected]

Friday, April 11, 14