Building high performance web applications

  • Published on
    06-Apr-2017

  • View
    63

  • Download
    2

Transcript

<p>From Zero to Hero with ReactJS</p> <p>Building high performance web applicationsMaurice de Beijer@mauricedb@react_tutorial</p> <p>TopicsWhat is fast?ToolingCode splittingServer side renderingOnly render above the foldService worker ABL - The Problem Solver2</p> <p>Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedb and @React_TutorialWeb: http://www.TheProblemSolver.nlE-mail: maurice.de.beijer@gmail.com</p> <p>3</p> <p>3</p> <p>What is fast?</p> <p> ABL - The Problem Solver4</p> <p>https://pixabay.com/nl/supersonische-vechter-vliegtuigen-63211/4</p> <p>It depends </p> <p> ABL - The Problem Solver5</p> <p>https://pixabay.com/nl/boord-blackboard-lettertype-1805318/5</p> <p>DOM Content Loaded</p> <p> ABL - The Problem Solver6</p> <p>https://www.pexels.com/photo/train-on-railroad-tracks-against-sky-258367/6</p> <p>First meaningful paint</p> <p> ABL - The Problem Solver7</p> <p>https://unsplash.com/photos/EXcDH29WLbg7</p> <p>Time to interactive</p> <p> ABL - The Problem Solver8</p> <p>https://pixabay.com/nl/dolfijn-kind-kinderen-spelen-1548448/8</p> <p>But there is more</p> <p> ABL - The Problem Solver9</p> <p>https://pixabay.com/nl/batterij-aa-energie-huidige-1109088/9</p> <p>Tooling</p> <p> ABL - The Problem Solver10</p> <p>https://www.pexels.com/photo/grey-metal-hammer-34520/10</p> <p>ChromeTimeline</p> <p> ABL - The Problem Solver11</p> <p>ChromeAudits</p> <p> ABL - The Problem Solver12</p> <p>YSlow ABL - The Problem Solver13</p> <p>WebPageTest ABL - The Problem Solver14</p> <p>WebPageTestselect the device</p> <p> ABL - The Problem Solver15</p> <p>WebPageTestselect the bandwidth</p> <p> ABL - The Problem Solver16</p> <p>WebPageTestiPhone 6</p> <p> ABL - The Problem Solver17</p> <p>Lighthouse ABL - The Problem Solver18</p> <p>Code splitting</p> <p> ABL - The Problem Solver19</p> <p>https://unsplash.com/search/splitting?photo=Xxd33FUBQeA19</p> <p>Right size framework</p> <p> ABL - The Problem Solver20</p> <p>https://pixabay.com/nl/marokko-truck-vrachtwagen-hooi-842660/20</p> <p>Server side rendering ABL - The Problem Solver21</p> <p>https://pixabay.com/en/technology-servers-server-1587673/21</p> <p>InlinecriticalCSS</p> <p> ABL - The Problem Solver22</p> <p>https://jonassebastianohlsson.com/criticalpathcssgenerator/22</p> <p>Only render above the fold</p> <p> ABL - The Problem Solver23</p> <p>https://pixabay.com/nl/sprinkhaan-viridissima-groene-19372123</p> <p>Service Worker(App-Cache)</p> <p> ABL - The Problem Solver24</p> <p>https://pixabay.com/en/waldorf-astoria-construction-169387/24</p> <p>Try ithttp://bit.ly/fast-apps ABL - The Problem Solver25</p> <p>Maurice de Beijer</p> <p>@mauricedb</p> <p>maurice.de.beijer@gmail.com</p> <p> ABL - The Problem Solver26</p>

Recommended

View more >