Composable applications


Fabio Nowaki



Autoglass, Junho-22


economizar tempo
e
reduzir gastos


com

Composable Application

Frota de Veículos no Brasil

Fonte: IBGE


  • Don't copy/allocate variables for any reason
$description = strip_tags($_POST['description']);
echo $description;
  • Profile your application again
  • Remember premature optimization is the root of all evil.
    • Before change your code, determine what is slowing down.

 

Número de Chassis 


Fonte: IBGE

Title


Networking and hacking the .htaccess



cache-control


Implement and changes headers when necessary
$path = "img/yourasset.pgn";
header("Cache-Control: private, max-age=86400, pre-check=86400");
header("Pragma: private");
header("Expires: " . date(DATE_RFC822,strtotime("+40 week")));
    
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == filemtime($path))) {
        // send the last mod time of the file back
        header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($path)).' GMT', true, 304);
        exit;
    }
    
    header("Content-type: image/png");
    header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($path)) . ' GMT');
    echo file_get_contents($path);

CAche-control


  • max-age: when defined, it doesn't make a new request to the server
  • Cache-control: no-cache, must-revalidate, max-age:0
  • Be explicit, use max-age or no-cache!
  • no-store for confidential information

hacking


  • Manipulating headers using .htaccess
<ifmodule mod_headers.c="">
    <filesmatch "\.(jpg|jpeg|png|gif|swf)$"="">
        Header set Cache-Control "max-age=604800, public"
    </filesmatch>
    <filesmatch "\.(js|css|swf)$"="">
        Header set Cache-Control "max-age=604800"
    </filesmatch>
</ifmodule>
  • Set cookie none when domain is serving assets
  • <IfModule mod_headers.c>
    	Header unset Cookie
        Header unset Set-Cookie 
    </IfModule>

    HACKING .HTACCESS

    • Add expiration
    •  <IfModule mod_expires.c>	
      	ExpiresActive On
      	ExpiresByType image/png "access plus 1 month"
      	ExpiresByType image/gif "access plus 1 month"
      	ExpiresByType image/jpeg "access plus 1 month"
      	ExpiresByType application/x-javascript "access plus 1 month"
          ExpiresByType application/javascript "access plus 1 month"
      	ExpiresByType text/css "access plus 1 month"
      	<Files favicon.ico>
                      ExpiresDefault "access plus 12 months"
              </Files>
      </IfModule>
    • Make sure resources are DEFLATED and GZIPED
    • AddOutputFilterByType DEFLATE text/css application/javascript application/x-javascript text/plain text/html

    Client-side cache


    • API Server/ Mid-Tier should implement cache-control
    • However...
      • It is still a round trip to server to find out if the data is fine.
      • Sometimes we don't own the api

    localstorage

    sessionstorage

    cookies

    cookies


    • Use them for crucial data, API integration if necessary
    • Try to keep the entire REQUEST under 1.5kb, cookies included 
    • Always use path for limit scope

    tools for measuring


    Minify your assets, please!


    Minify YOUR ASSETS


    • Minify our images
      • Choose the best format.
      • Photoshop's "Save For Web". 
      • ImageOptin
      • PageSpeed Insights
    • Use image sprites

      frontend, javascript and tooling

      dom manipulation and REFLOWS


      • Manipulating elements causes reflow
      • Understand reflow
        • Reads DOM tree, style structure, render tree, paint
      • Get first, DOM actions perform at once
      • Optimization
        • display:none; your element, make all changes, restore
        • clone your element, make changes, swap back

      Data uri's


      • Prefer using it along with CSS. Not good experiences using it inline.
      body {background: url(data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAD/2wAAY[...]}
    •  It saves a request!
    • It does not work on IE7 
    • IE8 limited to 32kb
    • Don't forget you can use fallbacks :)
    • Convert using base64_encode
    •  base64_encode(file_get_contents($path));

      tips

      • Moving Elements With Translate() Is Better Than Pos:abs Top/left (why)
      • Use CSS animations for visual and non-requirement effects
      • Use requestAnimationFrame()
      • DocumentFragment for holding changes

      .CSS {}


      • Leverage transitions and transforms
      • CSS code is always lighter than images
      • Use javascript fallbacks and leverage CSSPIE usage for old browsers
      • Don't use @import unless you are using SASS

      using CHROME inspector panel


      • Live edit 
      • Breakpoints
      • Watch Memory
      • Don't abuse the Garbage Collector
      • Pretty code for debugging and inspection
      • Under the hood
        • Keep lower than 60 FPS, especially for heavy animation apps
        • Rules
        • chrome://flags/


      more tools


      • Google Canary
      • JSPref
      • Chrome Inspector/Firebug
      • Weiner (Remote Debug)
      • Livereload.com



      questions?



      thanks!!

      other resources


      Made with Slides.com