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

Transcript

1. @meabed Build your frontend app with NEXT.js 1
2. @meabed 2 @meabed https://github.com/meabed https://meabed.com Hello! I am Mohamed Meabed You can find me on
3. @meabed
4. @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
5. @meabed Javascript is everywhere 5
6. @meabed Javascript Reaction? ⚗
7. @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…
8. @meabed 8
9. @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
10. @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
11. @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/
12. @meabed ES6 Features Code… 12 http://bit.ly/es6-features-10 http://bit.ly/es6-js-destruct
13. @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
14. @meabed 14 Babel: Transpiled code 1
15. @meabed 15 Babel: Transpiled code 2
16. @meabed 16 Babel: Transpiled code 3
17. @meabed 17 Babel: Transpiled code 4
18. @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
19. @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/
20. @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
21. @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
22. @meabed 22 Next.js: Routing
23. @meabed 23 Next.js: Page
24. @meabed 24 Next.js: Screens & Components
25. @meabed 25 Load external javascript in component #1
26. @meabed 26 Load external javascript in component #2
27. @meabed 27 SSR + Load javascript in component #3
28. @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
29. @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
30. @meabed 30 Tailwind CSS: Build
31. @meabed 31 Tailwind CSS: Utilities & Flexbox
32. @meabed 32 Tailwind CSS: Grid
33. @meabed 33 PurgeCSS: purge, minify, prefix
34. @meabed 34 Webpack bundle NEXT.js node server Babel transpiled code compatible with the nodejs version
35. @meabed 35 containerize Next.js app with Docker https://github.com/me-io/nextjs-starter/blob/master/Dockerfile
36. @meabed 36 Deploy Next.js on Heroku http://nextjs-starter-app.herokuapp.com
37. @meabed 37 Deploy Next.js on Heroku http://nextjs-starter-app.herokuapp.com
38. @meabed 38 Deploy Next.js on Heroku http://nextjs-starter-app.herokuapp.com
39. @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
40. @meabed Thanks! Any questions? You can find me at 40 @meabed https://github.com/meabed https://meabed.com