Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Magento PWA Studio extensibility overview
Ähnlich wie Magento PWA Studio extensibility overview (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Magento PWA Studio extensibility overview
- 2. Lars Röttig ● Senior Software Engineer ● Maintainer Magento Community Engineering Team
- 3. PWA Studio Technology Stack
- 4. PWA Studio components ● upward-js ○ Describes how a web server delivers and supports a Progressive Web Application. ● venia-ui ○ Component and workflow library for Venia storefront ● venia-concept ○ Base for project scaffolding
- 5. PWA Studio components ● Pagebuilder ○ First PWA Studio Extension ● Peregrine ○ Collection of custom React hooks ● Pwa-buildpack ○ Contains build and development tools
- 6. Requirements for extensibility API ● Secure ● Simple to use ● Flexible ● Well documented
- 7. What a extension provider expect from the extensibility API ● Extend build process ● Extend hooks ● Register own Routes ● Extend Content rendering from Magento ● Extend GraphQL Query and Mutation ● Extend overwrite CSS ● Replace, Insert,Extend JSX
- 8. What a extension provider expect from the extensibility API
- 9. Extensibility Concept of PWA Studio ● A Target is a low-level extensibility point ○ It enhanced Webpack Tapable ● Webpack Tapable ○ Is the Plugin System from Webpack ● Expose simple high-level extensibility point
- 10. Functionality Detail Target Framework https://git.io/JTmjC
- 14. 3. Build ● Targets run at build time and can change ○ designed to resolve extension logic at build time ● Don't impose any performance cost at build time.
- 17. Venia UI Target RichContentRenderer https://git.io/JTmjw
- 19. Venia UI Extensibility Targets routes https://git.io/JTmj6
- 21. Current extensibility API ● ✔️ Register own Routes ● ✔️ Extend hooks ● ✔️ Extend build process ● ✔️ Extend Content rendering from Magento ● ❌ Replace, Insert,Extend JSX ● ❌ Extend overwrite CSS ● ❓ Extend GraphQL Query and Mutation
- 22. Future of PWA Studio extensibility 🔥🚀
- 23. Future of PWA Studio extensibility 🔥 https://git.io/JTmjP
- 24. Future of PWA Studio extensibility 🔥 https://git.io/JTmjM
- 25. MageCONF 2020 24 Hours Coding Marathon, 1 pm (EEST) on October 23rd. https://www.mageconf.com.ua/
- 26. Questions ??? Lares Röttig Senior Software Engineer 🤓
Hinweis der Redaktion
- Also we have remote
- UPWARD is an acronym for Unified Progressive Web App Response Definition. An UPWARD definition file describes how a web server delivers and supports a Progressive Web Application.
- Secure think about Security
- JSX syntax extension to JavaScript. describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
- JSX syntax extension to JavaScript. describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
- pwa-buildpack scans all for declared Targets. declare file, is NodeJS script which exports a function.
- pwa-buildpack scans all for declared Targets. Extensions which declare Targets have a declare file, a NodeJS script which exports a function. BuildBus loads the declare file and calls that function with a TargetProvider object, an interface to the BuildBus.
- pwa-buildpack scans all for declared Targets. Extensions which declare Targets have a declare file, a NodeJS script which exports a function. BuildBus loads the declare file and calls that function with a TargetProvider object, an interface to the BuildBus.
- Interceptors execute, in turn calling other interceptors, until the build process completes. The implementation of interceptors and the timing of the Webpack compiler object will determine what order targets are called at this point.
- Rich content renderers for the RichContent component must implement this interface. Should be written as an ES Module—a module that exports functions with these names, rather than an object with these functions as properties.
- Rich content renderers for the RichContent component must implement this interface. Should be written as an ES Module—a module that exports functions with these names, rather than an object with these functions as properties.
- Rich content renderers for the RichContent component must implement this interface. Should be written as an ES Module—a module that exports functions with these names, rather than an object with these functions as properties.
- This target collects a list of RichContentRenderer modules. It builds an array of these renderers, which Venia’s RichContent component uses to try and render a block of “rich” content, such as HTML.
- This target collects a list of RichContentRenderer modules. It builds an array of these renderers, which Venia’s RichContent component uses to try and render a block of “rich” content, such as HTML.
- This target collects a list of RichContentRenderer modules. It builds an array of these renderers, which Venia’s RichContent component uses to try and render a block of “rich” content, such as HTML.
- This target collects a list of RichContentRenderer modules. It builds an array of these renderers, which Venia’s RichContent component uses to try and render a block of “rich” content, such as HTML.
- Replace, Insert,Extend JSX Works currently only for your namespace defineEnvVars overrides Project Customization TargetableCSSModule