Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lonestar ElixirConf 2017 talk about vutuv and P...

Lonestar ElixirConf 2017 talk about vutuv and Phoenix

Stefan Wintermeyer

February 11, 2017
Tweet

More Decks by Stefan Wintermeyer

Other Decks in Technology

Transcript

  1. @chris_mccord Push Messages • > 2 Million concurrent connections on

    a single server • JavaScript • Heavy Load • Speed
  2. Jakob Nielsen’s book „Usability Engineering“ from 1993 Delay User reaction

    0 - 100 ms Instant 100 - 300 ms Feels sluggish 300 - 1000 ms Machine is working… 1 s+ Mental context switch 10 s+ I’ll come back later…
  3. Web Search Delay Experiment Type of Delay Delay (ms) Duration

    (weeks) Impact on Avg. Daily Searches Pre-header 100 4 -0.20 % Pre-header 200 6 -0.59% Post-header 400 6 0.59% Post-ads 200 4 0.30% Source: https://www.igvita.com/slides/2012/webperf-crash-course.pdf
  4. Download a 58 kB file from a US east cost

    server to a client in Frankfurt. Protocol: HTTP Roundtrip Time: 80 ms Zeit client server 0 ms SYN --> <-- SYN,ACK 80 ms ACK --> GET --> <-- 10 TCP Segmente (14.600 Bytes) 160 ms ACK --> <-- 20 TCP Segmente (29.200 Bytes) 240 ms ACK --> <-- 40 TCP Segmente (15.592 Bytes) 320 ms ACK --> Time to download a 58 kB file: 320 ms
  5. TCP Slow-Start KB 0 55 110 165 220 Roundtrip 1.

    2. 3. 4. 213 99 42 14 114 57 28 14
  6. HTTPS KB 0 50 100 150 200 Roundtrip 1. 2.

    3. 4. 199 85 28 0 114 57 28 14 SSL
  7. Above the fold target: 28 KB KB 0 50 100

    150 200 Roundtrip 1. 2. 3. 4. 199 85 28 0 114 57 28 14 SSL
  8. Set a time budget and stick to it! Our time

    budget is 1 second within Germany.
  9. What we can control: • Transfer Protocol (e.g. HTTP/1.1 vs.

    HTTP/2.0) • Compression (e.g. gzip vs. zopfli vs. brotli) • Amount of files • File size • Time the server needs to generate the HTML • Content (e.g. HTML, CSS, JavaScript, Images)
  10. Phoenix is about 
 10 times faster 
 than Ruby

    on Rails. Yes, I did a proof of concept of vutuv with Ruby on Rails.
  11. But just a fast programming language is not good enough!

    Remember: We have to run vutuv.de on a dime.
  12. NGINX is our gatekeeper. It checks for cookies and routes

    accordingly. I did think of Varnish but hard drive is cheaper than RAM.
  13. /var/www/vutuv/ cache - index.html - index.html.gz users - xyz.html -

    xyz.html.gz No Cookie = Static Content Cross-Site Request Forgery (CSRF)
  14. guetzli -quality 75 a.jpg /tmp/q75-a.jpg convert a.jpg /tmp/q75-a.jpg -fx 'hypot(65-i,

    65-j) < 65 ? u : v' new_a.jpg https://github.com/google/guetzli
  15. By that we save 15-20% of file size. We use

    https://github.com/stavro/arc for uploading and initial conversion and optimize during off peak times.
  16. /var/www/vutuv/ cache - index.html - index.html.gz users - xyz.html -

    xyz.html.gz Provide a compressed version of a static file.
  17. Fill the Steps KB 0 50 100 150 200 Roundtrip

    1. 2. 3. 4. 199 85 28 0 114 57 28 14 SSL
  18. Analyse your workflow and prefetch stuff that you’ll need in

    the next step. <head> […] <%= if @conn.assigns[:prefetch] do %> <link rel="prefetch" title="a" href="a.jpg"> <% end %> </head>
  19. As a Rails developer it took me forever and many

    attempts to like the Phoenix Framework.
  20. Phoenix does not offer a quick reward for newbies! By

    now everybody should understand why speed is important if you want somebody to use something.
  21. rails new blog cd blog rails g scaffold post subject

    body rails db:migrate rails s 0:30 min
  22. rails new blog cd blog rails g scaffold post subject

    body rails db:migrate rails s Same Commands on all Operating Systems
  23. mix phoenix.new blog Y cd blog vim config/dev.exs brew install

    postgres brew services start postgres createuser -W --createdb blog demo mix ecto.create mix phoenix.gen.html Post posts subject body vim web/router.ex resources "/posts", PostController mix ecto.migrate mix phoenix.server 3:30 min
  24. mix phoenix.new blog Y cd blog vim config/dev.exs brew install

    postgres brew services start postgres createuser -W --createdb blog demo mix ecto.create mix phoenix.gen.html Post posts subject body vim web/router.ex resources "/posts", PostController mix ecto.migrate mix phoenix.server Different Operating System?
  25. mix phoenix.new blog cd blog mix ecto.create mix phoenix.gen.html Post

    posts subject body mix ecto.migrate mix phoenix.server This should be all