Downloaded 15 times
![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](https://image.slidesharecdn.com/jsnationslides-190612095811/85/SSR-with-Quasar-Framework-JSNation-2019-15-320.jpg)
More Related Content
Similar to SSR with Quasar Framework - JSNation 2019
![[Cordova] Empezando con Ionic](https://cdn.slidesharecdn.com/ss_thumbnails/cordovaempezandoconionic-160713033101-thumbnail.jpg?width=640&height=640&fit=bounds)
SSR with Quasar Framework - JSNation 2019
- 1. Quasar Framework v1.0 SSRwith Razvan Stoenescu, 7th June 2019 - JSNation -
- 2.
- 3. Short History Desktop Apps Web server Websites HTMLCSS Many programming languages
- 4. Short History Desktop Apps Web server Websites HTMLCSS Many programming languages JS
- 5. Short History Desktop Apps Web server Websites HTMLCSS Many programming languages JS CGI Scripts (C, Perl, ...) PHP
- 6. Short History Desktop Apps Web server Websites HTMLCSS Many programming languages JS CGI Scripts (C, Perl, ...) PHP
- 7. Short History Desktop Apps Web server Websites HTMLCSS Many programming languages Mobile Apps Many programming languages JS CGI Scripts (C, Perl, ...) PHP
- 8.
- 9.
- 10.
- 11. Developing with Quasar Onecodebase Websites Desktop Apps Mobile Apps SPA SSR + PWA SSR PWA Javascript
- 12. Developing with Quasar Onecodebase Javascript
- 13. Quasar CLI What is Quasar? Quasar Quasar UI ToolingUser Interface
- 14. Quasar CLI ➔ ProjectSetup $ quasar create <folder> What features do you want? Project folder
- 15. Quasar CLI ➔ ProjectSetup ➔ 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 ➔ ProjectSetup ➔ Development Server Hot Module Reload
- 17. Quasar CLI ➔ ProjectSetup ➔ Development Server ➔ Build System All latest and greatest best practices
- 18. Quasar CLI ➔ ProjectSetup ➔ 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 Vuecomponents ● Isomorphic ● Material 2.0
- 20. Quasar UI 9 Vuedirectives Examples: ● v-touch-pan ● v-touch-hold ● v-touch-repeat ● v-scroll
- 21. Quasar UI 11 Quasarplugins Examples: ● Dialog ● Notify ● AppFullscreen ● Loading ● Cookies ● BottomSheet
- 22. Quasar UI 6 categoriesof 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 thereare 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 SSRworks Store Components Router Boot files App code
- 26. How Quasar SSRworks Store Components Router Boot files Quasar CLI App code /quasar.conf.js
- 27. How Quasar SSRworks Store Components Router Boot files Quasar CLI Bundle renderer Nodejs Server bundle App code SSR Extensions Server
- 28. How Quasar SSRworks 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.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 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.
- 48.
- 49.
- 50. Handling errors -SERVER Server-side error No need to leave the browser tab!
- 51. Handling errors Client-side error Noneed 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 AppIcons 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
- 55.
- 56. Community App Extension Example $ quasarext add remote-dev-tools
- 57.