Mais conteúdo relacionado Development with Magento PWA Studio - M2NGP03 (Virtual Meetup)1. Copyright © 2019 TechDivisionall right reserved.
Development
with Magento PWA Studio
2. Copyright © 2019 TechDivisionall right reserved.
Lars Röttig
● Senior Software Engineer
● Maintainer Magento
Community Engineering
Team
3. What is a Progressive Web App ?
Copyright © 2019 TechDivisionall right reserved.
● Mobile installable
○ Push News
○ Geolocalization
○ Camera
○ Microphone
● Mobile first approach optimized for mobile devices
● Offline support
● Sensory detection of position and movement of the device
4. PWA Studio components and respobillitys
Copyright © 2019 TechDivisionall right reserved.
● Pagebuilder
○ Frist PWA Studio Extension
● Peregrine
○ Holds all custom hooks as library
● Pwa-buildpack
○ Contains build and development tools
● upward-js
5. PWA Studio components and respobillitys
Copyright © 2019 TechDivisionall right reserved.
● venia-concept
● venia-styleguide
● venia-ui
6. Venia UI Extensibility Targets
Copyright © 2019 TechDivisionall right reserved.https://magento.github.io/pwa-studio/venia-ui/reference/targets/
@magento/venia-ui
8. Built-in Targets
Copyright © 2019 TechDivisionall right reserved.
https://magento.github.io/pwa-studio/pwa-buildpack/reference/targets/
@magento/pwa-buildpack
10. Copyright © 2019 TechDivisionall right reserved.
Link-Collection
● https://pwastudio-stats.com/ - ⚡Stats for PWA Studio
● https://larsroettig.dev/getting-started-with-pwa-studio-extensibility/ - More complex Plugin
○ https://github.com/larsroettig/pwa-studio-component-override
● https://webpack.js.org/api/compiler-hooks/ - Compiler Hooks docs
● https://github.com/fooman/venia-ui-override-resolver - OverrideResolver good for a custome theme
● https://varunzxzx.github.io/blog/writing-babel-plugin - Ho to writing own Babel Plugins
Notas do Editor set of developer tools more like Framework that allow for the development PWA storefront based on Magento
uward-js is like a middelware
Receive a request from the application shell
Determine the appropriate service or process to handle the request
Get the results from the service or process
Build the HTTP response from the results
Send the response back to the application shell
Example (Strip unnecessary Lodash code from a specific JS module.)
Example (Declare that your extension contains CSS modules.)