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

Build your frontend app with Next.js

Build your frontend app with Next.js

Agenda
Javascript, the past and the present
Babel and Webpack
React js
NEXT.js Introduction
3 Ways Load external javascript in component
Server side rendering
CSS-in-JS with tailwind css
Purge and minify CSS
Bundle NEXT.js server app with webpack
Ship your production app with docker
Deploy your app in Heroku

Mohamed Meabed

January 10, 2019
Tweet

More Decks by Mohamed Meabed

Other Decks in Programming

Transcript

  1. @meabed
    Build your frontend
    app with NEXT.js
    1

    View full-size slide

  2. @meabed
    2
    @meabed
    https://github.com/meabed
    https://meabed.com
    Hello!
    I am Mohamed Meabed
    You can find me on

    View full-size slide

  3. @meabed
    Agenda
    4
    × Javascript, the past and the present
    × Babel and Webpack
    × React js
    × NEXT.js Introduction
    × 3 Ways Load external javascript in component
    × Server side rendering
    × CSS-in-JS with tailwind css
    × Purge and minify CSS
    × Bundle NEXT.js server app with webpack
    × Ship your production app with docker
    × Deploy your app in Heroku

    View full-size slide

  4. @meabed
    Javascript is everywhere
    5

    View full-size slide

  5. @meabed
    Javascript Reaction? ⚗

    View full-size slide

  6. @meabed
    Javascript is all over the world
    7
    “Any application that can be written in JavaScript, will eventually be
    written in JavaScript.” — Jeff Atwood
    × ~100% of all tech companies
    × ~100% of all Web pages
    × IoT & Robotics - Johnny-Five, Raspberry Pi, Arduino, and
    BeagleBone,...
    × Automotive
    × Blockchain
    × AI and ML
    × Space, healthcare, agriculture, education, etc…

    View full-size slide

  7. @meabed
    Edition Date published
    1 June 1997
    2 June 1998
    3 December 1999
    4 Abandoned
    5 December 2009
    5.1 June 2011
    6 June 2015[10]
    7 June 2016[11]
    8 June 2017[12]
    9 June 2018[8]
    ES5 / ES6 / ES7 / ES9… / ES.Next
    9

    View full-size slide

  8. @meabed
    ES5 / ES6 / ES7 / ES9… / ES.Next
    10
    × 1995: JavaScript is born as LiveScript
    × 1997: ECMAScript standard is established
    × 1999: ES3 comes out and IE5 is all the rage
    × 2000–2005: XMLHttpRequest, a.k.a. AJAX, gains popularity in
    app such as Outlook Web Access (2000) and Oddpost (2002),
    Gmail (2004) and Google Maps (2005).
    × 2009: ES5 comes out (this is what most of us use now) with
    forEach, Object.keys, Object.create and standard JSON
    × 2015: ES6/ECMAScript2015 comes out; it has mostly syntactic
    sugar, because people weren’t able to agree on anything more
    ground breaking
    × 2016: ES7, 2017: ES8, 2018: ES9… ES.Next

    View full-size slide

  9. @meabed
    ES6 10 features...
    11
    1. Default Parameters in ES6
    2. Template Literals in ES6
    3. Multi-line Strings in ES6
    4. Destructuring Assignment in ES6
    5. Enhanced Object Literals in ES6
    6. Arrow Functions in ES6
    7. Promises in ES6
    8. Block-Scoped Constructs Let and Const
    9. Classes in ES6
    10. Modules in ES6
    https://webapplog.com/es6/
    https://www.sitepoint.com/es6-enhanced-object-literals/
    https://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/

    View full-size slide

  10. @meabed
    ES6 Features Code…
    12
    http://bit.ly/es6-features-10
    http://bit.ly/es6-js-destruct

    View full-size slide

  11. @meabed
    13
    Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a
    backwards compatible version of JavaScript in current and older browsers or
    environments
    × Transform syntax
    × Polyfill
    × Source code transformations
    × Plugins “https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining"
    BABEL: The compiler for next generation JavaScript
    https://babeljs.io/docs/en/
    https://babeljs.io/en/repl.html
    https://babeljs.io/docs/en/plugins

    View full-size slide

  12. @meabed
    14
    Babel: Transpiled code 1

    View full-size slide

  13. @meabed
    15
    Babel: Transpiled code 2

    View full-size slide

  14. @meabed
    16
    Babel: Transpiled code 3

    View full-size slide

  15. @meabed
    17
    Babel: Transpiled code 4

    View full-size slide

  16. @meabed
    18
    Webpack is a tool that lets you compile JavaScript modules, also known as module
    bundler, given a large number of files, it generates a single file (or a few files) that run
    your app. It can perform many operations:
    × helps you bundle your resources.
    × watches for changes and re-runs the tasks.
    × can run Babel transpilation to ES5, allowing you to use the
    latest JavaScript features without worrying about browser
    support.
    × can transpile CoffeeScript to JavaScript
    × can convert inline images to data URIs.
    Webpack: A module bundler

    View full-size slide

  17. @meabed
    19
    × allows you to use require() for CSS files.
    × can run a development webserver.
    × can handle hot module replacement.
    × can split the output files into multiple files, to avoid having a
    huge js file to load in the first page hit.
    × can perform tree shaking.
    × Webpack is not limited to be use on the frontend, it’s also useful
    in backend Node.js development as well
    × Plugins “https://webpack.js.org/plugins/”
    Predecessors of webpack, and still widely used tools, include:
    Grunt, Gulp, Broccoli
    There are lots of similarities in what those and Webpack can do, but the main difference is that those
    are known as task runners, while webpack was born as a module bundler.
    Webpack: Bundle JavaScript files for usage in a browser
    https://flaviocopes.com/webpack/

    View full-size slide

  18. @meabed
    20
    React.js is a flexible and efficient front end javascript library for building UI, and is
    considered the most in demand in the job markets in 2018.
    × Virtual DOM (Document Object Model)
    × JSX - template language with full power of JavaScript
    × Single way Data Flow
    × React Native
    × Performance
    × Simplicity
    × Testability
    × Big and awesome community
    React JS

    View full-size slide

  19. @meabed
    21
    Next.js is a lightweight framework for static and server‑rendered applications.
    “React Applications Made Simple”
    × Server-rendered by default UX, SEO!
    × Automatic code splitting for faster page loads
    × Prefetching code chunks
    × Simple client-side routing (page based)
    × Dev Webpack with Hot Module Replacement(HMR)
    × Serve with Express or any other Node.js HTTP server
    × Customizable Babel and Webpack configurations.
    × CSS / SASS / SCSS with styled-jsx
    × Big Community and many plugins
    Next.js

    View full-size slide

  20. @meabed
    22
    Next.js: Routing

    View full-size slide

  21. @meabed
    23
    Next.js: Page

    View full-size slide

  22. @meabed
    24
    Next.js: Screens & Components

    View full-size slide

  23. @meabed
    25
    Load external javascript in component #1

    View full-size slide

  24. @meabed
    26
    Load external javascript in component #2

    View full-size slide

  25. @meabed
    27
    SSR + Load javascript in component #3

    View full-size slide

  26. @meabed
    28
    Next.js: Client + Server side rendering
    Out of the box initial server side rendering and client side rendering in Next.js
    eg: https://github.com/me-io/nextjs-starter/blob/master/pages/example/github-md-ssr.jsx
    × Initialize `props` from server in `getInitialProps`
    × Initialize `state` from `props`
    × Pass the state from the `Page` to the rendering
    × Export the component with HOC `withRouter`
    × Use `componentDidUpdate` to get previous router and current router
    and decide when to update component state
    Next.js is well document - https://github.com/zeit/next.js/blob/master/README.md

    View full-size slide

  27. @meabed
    29
    Tailwind CSS: A Utility-First CSS Framework
    × Responsive & Mobile first
    × Utilities and composable
    × No CSS inheritance = No CSS override
    × Don’t write CSS = Fewer CSS files
    × Highly configurable, great fit for style guides and multiple
    teams
    × Extendable with plugins
    × CSS Purgeable
    https://tailwindcss.com/docs/what-is-tailwind/
    https://frontendnews.io/editions/2018-08-08-tailwind-css-tutorial

    View full-size slide

  28. @meabed
    30
    Tailwind CSS: Build

    View full-size slide

  29. @meabed
    31
    Tailwind CSS: Utilities & Flexbox

    View full-size slide

  30. @meabed
    32
    Tailwind CSS: Grid

    View full-size slide

  31. @meabed
    33
    PurgeCSS: purge, minify, prefix

    View full-size slide

  32. @meabed
    34
    Webpack bundle NEXT.js node server
    Babel transpiled code compatible with the nodejs version

    View full-size slide

  33. @meabed
    35
    containerize Next.js app with Docker
    https://github.com/me-io/nextjs-starter/blob/master/Dockerfile

    View full-size slide

  34. @meabed
    36
    Deploy Next.js on Heroku
    http://nextjs-starter-app.herokuapp.com

    View full-size slide

  35. @meabed
    37
    Deploy Next.js on Heroku
    http://nextjs-starter-app.herokuapp.com

    View full-size slide

  36. @meabed
    38
    Deploy Next.js on Heroku
    http://nextjs-starter-app.herokuapp.com

    View full-size slide

  37. @meabed
    Build together
    × Attend the meetups
    × Follow us on Twitter @meiohq
    × Subscribe to the newsletter
    × Speak and present
    × Share and Invite
    × Give feedback and suggestions
    × And everything else :)
    39

    View full-size slide

  38. @meabed
    Thanks!
    Any questions?
    You can find me at
    40
    @meabed
    https://github.com/meabed
    https://meabed.com

    View full-size slide