More Related Content
What's hot
What's hot (20)
Similar to SSR with Quasar Framework - JSNation 2019
Similar to SSR with Quasar Framework - JSNation 2019 (20)
Recently uploaded
Recently uploaded (20)
SSR with Quasar Framework - JSNation 2019
- 1. Quasar Framework v1.0 SSR with Razvan Stoenescu, 7th June 2019 - JSNation -
- 3. Short History Desktop Apps Web server Websites HTML CSS Many programming languages
- 4. Short History Desktop Apps Web server Websites HTML CSS Many programming languages JS
- 5. Short History Desktop Apps Web server Websites HTML CSS Many programming languages JS CGI Scripts (C, Perl, ...) PHP
- 6. Short History Desktop Apps Web server Websites HTML CSS Many programming languages JS CGI Scripts (C, Perl, ...) PHP
- 7. Short History Desktop Apps Web server Websites HTML CSS Many programming languages Mobile Apps Many programming languages JS CGI Scripts (C, Perl, ...) PHP
- 11. Developing with Quasar One codebase Websites Desktop Apps Mobile Apps SPA SSR + PWA SSR PWA Javascript
- 12. Developing with Quasar One codebase Javascript
- 13. Quasar CLI What is Quasar? Quasar Quasar UI Tooling User Interface
- 14. Quasar CLI ➔ Project Setup $ quasar create <folder> What features do you want? Project folder
- 15. Quasar CLI ➔ Project Setup ➔ Development Server $ quasar dev -m spa $ quasar dev -m pwa $ quasar dev -m electron $ quasar dev -m ssr $ quasar dev -m [ios|android] Project folder Browser Extensions
- 16. Quasar CLI ➔ Project Setup ➔ Development Server Hot Module Reload
- 17. Quasar CLI ➔ Project Setup ➔ Development Server ➔ Build System All latest and greatest best practices
- 18. Quasar CLI ➔ Project Setup ➔ Development Server ➔ Build System Minification (JS & HTML & CSS) Prefetching Cache busting PWA manifest Lazy loading Preloading Tree Shaking Web Worker and many more...
- 19. Quasar UI 114 Vue components ● Isomorphic ● Material 2.0
- 20. Quasar UI 9 Vue directives Examples: ● v-touch-pan ● v-touch-hold ● v-touch-repeat ● v-scroll
- 21. Quasar UI 11 Quasar plugins Examples: ● Dialog ● Notify ● AppFullscreen ● Loading ● Cookies ● BottomSheet
- 22. Quasar UI 6 categories of utils Examples: ● Date ● Color ● DOM ● Scrolling
- 23. Quasar Icon Sets & App space Icons Fontawesome Fontawesome Pro Ionicons Material Icons MDI (Material Design Icons - extended) Themify Icons Eva Icons
- 24. ➔ Currently there are 45 Quasar language packs ➔ RTL mode also transforms user-space CSS code automatically ➔ Ability to switch from/to RTL mode dynamically at runtime Quasar Language Packs & Full RTL Support
- 25. How Quasar SSR works Store Components Router Boot files App code
- 26. How Quasar SSR works Store Components Router Boot files Quasar CLI App code /quasar.conf.js
- 27. How Quasar SSR works Store Components Router Boot files Quasar CLI Bundle renderer Nodejs Server bundle App code SSR Extensions Server
- 28. How Quasar SSR works Store Components Router Boot files Quasar CLI Bundle renderer Nodejs Server bundle App code SSR Extensions Server Browser Client bundle HTMLHydrates Renders
- 29. Quasar SSR + PWA
- 30. SEO for free - Quasar Meta Plugin
- 31. SEO for free - Quasar Meta Plugin Page title
- 32. SEO for free - Quasar Meta Plugin Page title Meta tags
- 33. SEO for free - Quasar Meta Plugin Page title Meta tags <script> or <link> tags
- 34. SEO for free - Quasar Meta Plugin Page title Meta tags <script> or <link> tags <body> or <html> tags attributes
- 35. SEO for free - Quasar Meta Plugin Page title Meta tags <script> or <link> tags <body> or <html> tags attributes <noscript> content
- 36. SEO for free - Quasar Meta Plugin
- 37. PreFetch feature
- 43. PreFetch feature
- 44. PreFetch feature
- 45. PreFetch feature
- 46. Boot files main.js ● Cluttered ● A lot of boilerplate ● Hard to build SPA/PWA/SSR/Mobile/Desktop apps without manually adding complexity Boot Files ● One file per concern ● No boilerplate ● No additional complexity ● Easy to pick based on build type through /quasar.conf.js
- 47. Boot files
- 48. Boot files
- 49. Boot files
- 50. Handling errors - SERVER Server-side error No need to leave the browser tab!
- 51. Handling errors Client-side error No need to leave the browser tab!
- 52. Quasar App Extensions ● Configure CLI features ● Add folders/files ● Add CLI commands ● Build, launch and control an API server ● Register UI components ● ....
- 53. Input: image file @quasar/icon-factory PWA icons Cordova App Icons Cordova Splashscreen PWA Splashscreen Electron App Icons For all targeted platforms: ● Browsers: Chrome, FF, Safari, IE, ... ● Mobile Apps: iOS, Android ● Desktop Apps: macOS, Windows, Linux Favicons SPA Web Icons Icon Factory App Extension
- 54. Testing App Extension ● Unit & e2e testing harnesses ● Product quality auditing tools ● Product security auditing tools
- 56. Community App Extension Example $ quasar ext add remote-dev-tools