DOCSLIB.ORG

Building a Magento PWA with … React? About Me About Me

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Building a Magento PWA with … React? About Me About Me Jisse Reitsma Building a Magento PWA with … React? About me About me • Developer and owner of Yireo – From Soest, The Netherlands • Extension developer / Part of ExtDN – Magento Extension Developer Network • Magento Master – 2017 / 2018 / 2019 • Trainer of developers – Magento 2 backend & frontend – React, GraphQl, Vue, Vue Storefront Me in India • 2004 = Delhi, Srinagar, Leh, Himachal Pradesh • 2005 = Delhi, Agra, Varanasi, Jodhpur, Pushkar, Jaiselmer • 2008 = Dharamsala, Mumbai, Goa • 2009 = Dharamsala, Jammu, Amritsar • 2010 = Dharamsala • 2015 = Bangalore, Karnataka, Goa • 2020 = Mumbai What else happened in those years? • 2004 = My first e-commerce project (Joomla, Virtuemart) • 2005 = My first major disappointment in Joomla and Virtuemart • 2008 = Release of Magento 1.0 • 2009 = First Meet Magento events • 2010 = Investment of eBay in Magento • 2015 = Joomla World Conference, release of Magento 2.0 • 2020 = Meet Magento India 2020 Changes on the web • 2004 = Flash Player, Thefacebook, Yelp, Firefox 1.0 • 2005 = Youtube, Google Maps, Adobe acquired Macromedia • 2008 = Adobe AIR, HTML5, Chrome • 2009 = IE8, Bing, Gmail, WebOS • 2010 = React, ES6, CoffeeScript • 2015 = VueJS, Angular 2, Edge • 2020 = …. ? A lot of change Frontend development in Magento Magento frontend development Magento 1 Magento 2 XML layout, PHTML templating, XML layout, PHTML templating, Block classes, Prototype / Block & ViewModel classes, Scriptaculous, some jQuery jQuery, Knockout, RequireJS, UiComponents Magento 2 frontend development • Difficult to extend – Especially with UiComponents like minicart, cart & checkout – Let’s not even start about customizing grids & forms in backend • Hard to optimize for speed – Really hard to get a better Google Lighthouse ranking – JavaScript bundling (kudos to Andrew Levine & Willem Wigman) • Outdated – Outdated versions of jQuery, Knockout, Require – LESS is used while more people like SASS nowadays – No real JavaScript framework, but more similar to a … car wreck Magento 2 frontend development Magento 2 old frontend Magento 2 PWA? XML layout, PHTML templating, ... Block & ViewModel classes, jQuery, Knockout, RequireJS, UiComponents Magento 2 PWA? • A hype • A different approach • A lot of confusion PWA hype • A future PWA is great, wunderful, much better, worth more, best thing ever, better again, blah blah Magento 2 “new” frontend development • GraphQL & REST APIs – Let JavaScript communicate with a headless Magento API • JavaScript frontend – Built in Vue, React, Angular or whatever • Opportunities – Offline shopping, new payment procedure, faster web in general • Limitations – No more Luma / custom work needed, new knowledge field A typical headless React app • Local webdevelopment – Node, yarn, Webpack • React basics – JSX, routing, hooks • React state management – Local state, localStorage/sessionStorage, context, Redux, Mobx • Apollo as GraphQL client – Data management (products, categories, settings) • Magento 2 GraphQL API – Core endpoints, 3rd party extension endpoints Magento 2 frontend development Magento 2 old frontend Magento 2 PWA XML layout, PHTML templating, React with JSX and hooks, yarn or Block & ViewModel classes, npm, Webpack, babel, Redux, jQuery, Knockout, RequireJS, Apollo Client, GraphQl endpoints UiComponents Magento 2 frontend development Magento 2 old frontend Magento 2 headless XML layout, PHTML templating, ... Block & ViewModel classes, jQuery, Knockout, RequireJS, UiComponents Choices to make Redux or not? • Redux – Global state management with solid base architecture – Lot of work to get going before you can build anything – Confusing with GraphQL: Two single sources of truth • Apollo + hooks – Remote data (Magento) is leading – No solution when it comes to non-remote shared state (context? Hooks?) • Alternative state machines – Mobx, unstated, React Machinery, ... Apollo or not? • Apollo Client • Relay Client • Not using GraphQL at all – REST, JSON feeds, JSONP What kind of server architecture? • Direct connection between Magento and browser – PHP-based caching, PHP-FPM handling • Middleware layer between Magento and browser – Perhaps written in Node or Go – Option for redirecting browser traffic to other services (ElasticSearch, Algolia, MongoDB, Redis, WordPress/Contentful/Prismic, PIM) – Option for additional performance because PHP is skipped With what kind of code base to start? • Nothing – Build it yourself • Use a ready-made solution and modify it – Like Magento PWA Studio Magento PWA Studio • Buildpack – Node, yarn, Webpack/Workbox • React basics – JSX, routing, hooks • Redux state management – Local state, localStorage/sessionStorage, context • Apollo as GraphQL client – Data management (products, categories, settings) • Magento 2 GraphQL API – Core endpoints, 3rd party extension endpoints Magento PWA Studio specifics • Buildpack • Venia base theme • Venia UI library • Peregrine component library • UPWARDS PWA providers Framework Middleware State Magento PWA Studio React No Context, Redux, Apollo DEITY Falcon React Yes Context, Redux, Apollo ScandiPWA React No Apollo Vue Storefront Vue Yes Vuex, REST Duka React No Context, Redux, Apollo Duka? I beg your pardon? Nigel Farage – one of the people responsible for Brittain leaving the EU Announcing Duka • Created by Yireo • Fresh new React / Redux / Apollo framework – Includes routing, lazy loading, call locking – Pages for products, categories, CMS-pages, account, cart • Work in progress – Product options, configurable products, checkout • Meant as an educational prototype – Do it yourself and make it better – Built in less than 80 hours by 1 developer Learning curve of a developer • Hello World tutorial • Functions, classes, more advanced features • Object oriented programming & design patterns • Build your own CMS – Take the wisdom and knowledge to apply into your own opinionated application Learning curve of a React developer • Hello World tutorial • JSX, context, hooks, more advanced features • Higher Order Components, Redux state management • Build your own PWA – Take the freedom and joy to create the frontend you want to create What I learned by creating Duka • React is easy. Creating a Redux flow is more tricky. – Login: Check for token, generate token, use token to authenticate, save authentication reply, fetch additional user details – Checkout: https://devdocs.magento.com/guides/v2.3/graphql/tutorials/checkout/ • Creating a stable & complete frontend is time-consuming – Pick not just a technology, but also a community: See which one fits you best. PWA providers • Magento PWA Studio • DEITY Falcon • ScandiPWA • Vue Storefront • Build your own • ... Be progressive, start playing Dhanyawad.
Load more

Recommended publications
  • Delete Query in Php with Where Clause
    Delete Query In Php With Where Clause butAgrostological electrified her Walden din remotely. still stakes: Arrayed undeceivable and geologic and pillaredEnrico neverTeodorico summer niggardizing proudly when quite Winnagonistically referred uncivilly.his scabrousness. Joe couch his volcanologist donned conversably, but silky Tharen never brine so In this title links that by a button the name, the link from ingesting, which may offer opportunities to query with an object as a query would cause conflicts that extends zend_db_table_abstract If in the query in delete with php where clause, also have honored the! PHP MySQLi Prepared Statements Tutorial to Prevent SQL. Produces: LEFT JOIN comments ON comments. Sql where clause exactly the deleted values. CodeIgniter Delete Query W3Schools Tutorialspoint W3Adda. The sacrifice is set until its default value. Click affair the rock to show relevant links that substantial support tech notes, APAR defect info, and videos that you can overlap to continue reading content journey we get the info that i need. In clause that deletes a table of the use either truncate table name. Php delete row mysql Code Example Grepper. If i omit that WHERE has all records will be deleted The students. Assume our view page in delete statement is used like clause with and since it will help you execute bulk changes on google cloud spanner. Return deleted in php script i find a query clauses with queries that deletes the where all. This a dml statement and because a page i cannot load all the from the in delete php code? HCL will search select IBM collaboration, commerce, digital experience and security software products.
    [Show full text]
  • Performance Impact Guide
    2019 eCOMMERCE 3RD PARTY TECHNOLOGY INDEX 3RD PARTY Performance Impact Guide eComm Insights 2019 eCOMMERCE 3RD PARTY TECHNOLOGY INDEX 1 Last year YOTTAA released its first-ever 3rd Party Performance Index, and while we knew it contained valuable data for eCommerce execs, we were overwhelmed by the market reception of the report. Across the industry, many retailers were amazed to learn that detailed data on the performance of the 3rd parties on their sites existed, as they had never seen a similar report. Because these retailers are under a great deal of pressure to keep shoppers from going to Amazon, especially during the upcoming holiday shopping season, they aim to provide a superior WELCOME TO THE shopping experience by adding rich content, images, and technologies in order to better compete. As a result, for many eCommerce pros, the index not only became a valuable site performance tool, it 2019 also became a one-stop listing of the top 3rd party eCommerce technologies across multiple categories. Because YOTTAA accelerates over 1,500 eCommerce 3rd Party sites, we have the unique visibility to analyze detailed information on the performance of almost 1,000 3rd parties. Through YOTTAA’s 3rd Party Knowledge Base, our customers are able to inventory Index all 3rd parties on their sites, benchmark individual 3rd party performance, and make optimization recommendations based on knowledge from every page view. As a result, our customers can add any 3rd party to their site, regardless of their Performance Impact Rating (PIR) ranking, and still achieve exceptionally fast performance. In this year’s index, we analyzed and ranked twice as many 3rd parties over our inaugural report, providing even more information to help brands understand the impact 3rd parties can have on site performance.
    [Show full text]
  • Adobe Trademark Database for General Distribution
    Adobe Trademark List for General Distribution As of May 17, 2021 Please refer to the Permissions and trademark guidelines on our company web site and to the publication Adobe Trademark Guidelines for third parties who license, use or refer to Adobe trademarks for specific information on proper trademark usage. Along with this database (and future updates), they are available from our company web site at: https://www.adobe.com/legal/permissions/trademarks.html Unless you are licensed by Adobe under a specific licensing program agreement or equivalent authorization, use of Adobe logos, such as the Adobe corporate logo or an Adobe product logo, is not allowed. You may qualify for use of certain logos under the programs offered through Partnering with Adobe. Please contact your Adobe representative for applicable guidelines, or learn more about logo usage on our website: https://www.adobe.com/legal/permissions.html Referring to Adobe products Use the full name of the product at its first and most prominent mention (for example, “Adobe Photoshop” in first reference, not “Photoshop”). See the “Preferred use” column below to see how each product should be referenced. Unless specifically noted, abbreviations and acronyms should not be used to refer to Adobe products or trademarks. Attribution statements Marking trademarks with ® or TM symbols is not required, but please include an attribution statement, which may appear in small, but still legible, print, when using any Adobe trademarks in any published materials—typically with other legal lines such as a copyright notice at the end of a document, on the copyright page of a book or manual, or on the legal information page of a website.
    [Show full text]
  • PDF Download Extending Symfony2 Web Application Framework
    EXTENDING SYMFONY2 WEB APPLICATION FRAMEWORK PDF, EPUB, EBOOK Sebastien Armand | 140 pages | 30 Mar 2014 | Packt Publishing Limited | 9781783287192 | English | Birmingham, United Kingdom Extending Symfony2 Web Application Framework PDF Book It relied on Git submodules the composer did not exist back then. Drupal is used by numerous local businesses to global corporations and diverse organizations all across the globe. What I like most is the variety of content mixed with best practices for web development. The service definitions are then all cached so that we don't have to compile the container again. Symfony aims to speed up the creation and maintenance of web applications and to replace repetitive coding tasks. The controller makes sure that a user can join a meetup. Our class has only one method that geocodes an IP address and returns a set of coordinates based on the required precision. PHP 7, which is a popular open source scripting language, is used to build modular functions for your software. If you look into the code, version 1. We also reviewed how to use events to keep your code logic where it belongs and avoid cluttering your controllers with unwanted code. Git Best Practices Guide. Next Page. As always, backward compatibility means that you should be able to upgrade easily without changing anything in your code. Previous experience with Drupal is a must to unleash the full potential of this book. This book is a collection of Yii2 recipes. Modular Programming with PHP 7. So you can easily reproduce them in your environment and learn Yii2 fast and without tears.
    [Show full text]
  • The Price of Growth EV/UFCF 54X EV/EBITDA 39X Adobe Is One of the Most Prominent Software Companies in the World
    RESEARCHNovember REPORT11, 2019 November 11, Adobe2019 Inc. Insert Picture in Master View Stock Rating PASS Price Target $250 Bear Price Bull Case Target Case $200 $250 $350 Ticker: ADBE Adobe Inc. Market Capitalization $141B The Price of Growth EV/UFCF 54x EV/EBITDA 39x Adobe is one of the most prominent software companies in the world. The firm’s creativity suite, Creative Cloud, is the industry 52 Week Performance standard for content creators globally and commands a significant pricing premium over competitors. The firm also owns an industry- 140 leading digital experience platform, which enables marketers to efficiently target and reach customers. 120 116.3 The TMT team believes that Adobe is an extremely high-quality 110.1 business with wide moats. The challenge, however, is justifying the firm’s valuation. At a 50x+ EV/UFCF multiple, the firm needs to 100 exhibit extraordinary growth to achieve above-average returns. At Adobe’s current price, we do not feel that we can achieve a 80 sufficient hurdle rate to feel comfortable investing. While the firm has spent over $8B on acquisitions in the last four years, our projections suggest that the firm would need to sustain their current 60 growth rate without any further acquisitions to justify the current 08-Nov-18 09-May-19 07-Nov-19 valuation. The team will continue to monitor the equity to determine NASDAQ:ADBE S&P 100 if a future investment opportunity will appear. Tech., Media & Telecom Matthew Mastromarco [email protected] Nick Gakena [email protected] Allen Chen [email protected] The information in this document is for EDUCATIONAL and NON-COMMERCIAL use only and is not intended to Nikola Cugalj constitute specific legal, accounting, financial or tax advice for any individual.
    [Show full text]
  • Magento User Guide
    User Guide From Getting Started... To Getting More From Your Store Important Notice Important Notice Magento reserves the right to make corrections, modifications, enhancements, improvements, and other changes to its products and services at any time and to discontinue any product or service without notice. Customers should obtain the latest relevant information before placing orders and should verify that such information is current and complete. All products are sold subject to Magento‘s terms and conditions of sale supplied at the time of order acknowledgment. Magento warrants performance of its products to the specifications applicable at the time of sale in accordance with Magento‘s standard warranty. Testing and other quality control techniques are used to the extent Magento deems necessary to support this warranty. Except where mandated by government requirements, testing of all parameters of each product is not necessarily performed. Magento assumes no liability for applications assistance or customer product design. Customers are responsible for their products and applications using Magento components. To minimize the risks associated with customer products and applications, customers should provide adequate design and operating safeguards. Magento does not warrant or represent that any license, either express or implied, is granted under any Magento patent right, copyright, mask work right, or other Magento intellectual property rights relating to any combination, machine, or process in which Magento products or services are used. Information published by Magento regarding third-party products or services does not constitute a license from Magento to use such products or services or a warranty or endorsement thereof. Use of such information may require a license from a third party under the patents or other intellectual property of the third party, or a license from Magento under the patents or other intellectual property of Magento.
    [Show full text]
  • Appendix a the Ten Commandments for Websites
    Appendix A The Ten Commandments for Websites Welcome to the appendixes! At this stage in your learning, you should have all the basic skills you require to build a high-quality website with insightful consideration given to aspects such as accessibility, search engine optimization, usability, and all the other concepts that web designers and developers think about on a daily basis. Hopefully with all the different elements covered in this book, you now have a solid understanding as to what goes into building a website (much more than code!). The main thing you should take from this book is that you don’t need to be an expert at everything but ensuring that you take the time to notice what’s out there and deciding what will best help your site are among the most important elements of the process. As you leave this book and go on to updating your website over time and perhaps learning new skills, always remember to be brave, take risks (through trial and error), and never feel that things are getting too hard. If you choose to learn skills that were only briefly mentioned in this book, like scripting, or to get involved in using content management systems and web software, go at a pace that you feel comfortable with. With that in mind, let’s go over the 10 most important messages I would personally recommend. After that, I’ll give you some useful resources like important websites for people learning to create for the Internet and handy software. Advice is something many professional designers and developers give out in spades after learning some harsh lessons from what their own bitter experiences.
    [Show full text]
  • Feature List Experience Commerce Without Limits
    Magento Commerce Feature List Experience Commerce without Limits Magento Commerce erases the boundaries of what is possible, giving you the power to create bold and unique shopping experiences that will transform your business. Built for rapid and cost-effective innovation, the platform combines rich, out-of-the-box functionality, enterprise performance and scale, and powerful business tools to keep you ahead of increasingly complex commerce operations and growing customer demands. Learn what Magento Commerce can do for your business by exploring: Feature Highlights Describes powerful features that will help you rapidly grow your business. Core Magento Commerce Features Shows Magento’s comprehensive feature set that boosts sales, business agility, performance, and more. magento.com :: 1-877-574-5093 :: [email protected] | 2 Feature Highlights Customer Segmentation and Personalization Create personalized shopping experiences that boost conversion rates by dynamically displaying content, promotions, and pricing to specific customers based on properties such as their location, gender, order history, lifetime purchase value, wish list items, and more. You can also target unknown site visitors based on the products they have viewed or items in their cart. Dynamic Rule-Based Product Relations Set automated rules to determine which products to present as up-sells, cross-sells, and related products to each customer segment. Rules are easily administered through a condition-based tool allowing you to effortlessly target product suggestions to increase sales and average order values. Instant Purchase Boost conversion rates for returning shoppers with a new Instant Purchase checkout option. Customers can use previously-stored payment credentials and shipping information to skip checkout steps, making the process faster and easier, especially for mobile shoppers.
    [Show full text]
  • Magento Enterprise Edition 2.1 User Guide Iii Contents
    Magento Enterprise Edition User Guide Version 2.1 GETTING STARTED 1 Introduction 2 CHAPTER 1: Welcome 3 Resources 4 Join the Conversation! 7 CHAPTER 2: About This Release 9 System Requirements 10 Installation 13 Prelaunch Checklist 14 Your Login Credentials 16 For Your Records 17 CHAPTER 3: Your Magento Account 19 Creating a Magento Account 20 Sharing Your Account 23 CHAPTER 4: Quick Tour 27 The Path to Purchase 28 Home Page 30 Catalog Page 32 Search Results 34 Product Page 36 Shopping Cart 38 Customer Journey 39 Attract New Customers 41 Engage Your Customers 42 ii Copyright © 2016 Magento, Inc. All rights reserved. Contents Moment of Purchase 44 Increase Average Order Value 45 Customer Retention 47 Loyalty & Advocacy 49 Success! 50 Basic Configuration 53 CHAPTER 5: Store Admin 55 Admin Sign In 56 Your Admin Account 58 Admin Sidebar 59 Admin Workspace 62 Dashboard 63 Message Inbox 67 Global Search 70 Grid Controls 71 Grid Layout 73 Actions Control 75 CHAPTER 6: Store Details 81 Store Information 82 Locale Options 83 State Options 84 Country Options 85 Merchant Location 87 Currency 88 Store Email Addresses 89 Contact Us 91 CHAPTER 7: Storefront Branding 93 Uploading Your Logo 94 Adding a Favicon 97 Store Demo Notice 99 Magento Enterprise Edition 2.1 User Guide iii Contents Changing the Welcome Message 100 Copyright Notice 101 CHAPTER 8: Websites, Stores & Views 103 Configuration Scope 104 Single Store Mode 106 CHAPTER 9: Industry Compliance 107 PCI Compliance Guidelines 108 Privacy Policy 109 Cookie Law Compliance 110 Cookie Restriction
    [Show full text]
  • Inchoo's Magento Posts
    September 8th, 2009 Published by: inchoo Inchoo's Magento Posts You're reading the 200th blog post edition of Inchoo's Magento e-book. It collects all of our blog posts on Magento. We want to thank everyone for staying with us so far and hope we will live to see 1000th blog post anniversary. :) Inchoo is an ecommerce design and development company specialized in building Magento online stores. Boost the speed of your Magento One of the drawbacks of Magento is currently its speed if default configuration is used. There are certain ways of making it run faster. The best one is to enable GZip compression by changing .htaccess file a little. You just need to uncomment part of the code. In my case, the speed increase was exactly 235%. Add custom structural block / reference in Magento | Inchoo If you already performed some Magento research, you will know that it is built on a fully modular model that gives great scalability and flexibility for your store. While creating a theme, you are provided with many content blocks that you can place in structural blocks. If you are not sure what they are, please read Designer’s Guide to Magento first. Magento provides few structural blocks by default and many content Step 1: Name the structural block blocks. This article tells what needs to be in place to create new Open the file layout/page.xml in your active theme folder. structural block. Inside you will find lines like: What are structural blocks? <block type="core/text_list" name="left" as="left"/> They are the parent blocks of content blocks and serve to <block type="core/text_list" name="content" as="content"/> <block type="core/text_list" name="right" as="right"/> position its content blocks within a store page context.
    [Show full text]
  • Google Cloud Search Benefits Like These Are All Within Reach
    GETTING THE BEST FROM ENTERPRISE CLOUD SEARCH SOLUTIONS Implementing effective enterprise cloud search demands in-depth know-how, tuning, and maintenance WHY MOVE TO THE CLOUD? More and more organizations recognize that moving enterprise systems to the cloud is a cost-effective, highly-scalable option. In fact, by 2020, according to IDC, 67 percent of enterprise infrastructure and software will include cloud-based offerings. GUIDE TO ENTERPRISE CLOUD SEARCH SOLUTIONS | 2 No surprise then that we’re seeing such rapid growth in With so many options, and more cloud solutions launching enterprise cloud search solutions. all the time, what’s the right option for you? These can help modern organizations stay agile, providing This white paper provides a useful guide, exploring some of multiple benefits including: today’s leading enterprise cloud search solutions, unpacking their key features, and highlighting challenges that can arise in their • high availability deployment: • flexibility and scalability • security • Cloud search use cases • ease of maintenance and management • cost reduction (no cost for an on-premise infrastructure • Cloud search solutions, pricing models, and key features: and more transparent pricing models) - Elastic Cloud • improved relevance – accessing more data to feed into - AWS Elasticsearch search machine-learning algorithms - AWS CloudSearch • unified search – easier integration with content from - SharePoint Online other products offered by the same vendor - Azure Search - Google Cloud Search Benefits like these are all within reach. But how to capture - Coveo Cloud them? While cloud companies provide the infrastructure and - SearchStax toolsets for most search use cases – from intranet search and - Algolia public website search to search-based analytics applications – truly effective search capabilities demand in-depth knowledge • Challenges and considerations when deploying a and expert implementation, tuning, and maintenance.
    [Show full text]
  • Adobe & Marketo Fast Facts
    Adobe & Marketo Fast Facts Company Adobe is one of the largest software companies in Marketo, Inc., offers the leading Engagement Overview the world and is the global leader in creative, Platform that empowers marketers to create lasting digital document and digital experience solutions. relationships and grow revenue. Consistently Its diverse product line—which includes Adobe recognized as the industry's innovation pioneer, Creative Cloud, Adobe Document Cloud and Adobe Marketo is the trusted platform for thousands of Experience Cloud—enables customers to create CMOs thanks to its scalability, reliability, and groundbreaking digital content, deploy it across openness. Marketo is headquartered in San Mateo, media and devices, measure and optimize it over CA, with offices around the world, and serves as a time, and achieve greater business success. Only strategic partner to large enterprises and fast- Adobe gives everyone—from emerging artists to growing organizations across a wide variety of global brands—everything they need to design and industries. deliver exceptional digital experiences. Ticker Symbol NASDAQ: ADBE Privately held company Website www.adobe.com www.marketo.com Headquarters San Jose, CA San Mateo, CA CEO Shantanu Narayen Steve Lucas Employees 19,000+ worldwide 1,300+ worldwide Revenue Reported revenue of $7.3 billion in FY2017 Not disclosed History Founded in 1982; Went public in 1986 Founded in 2006; Acquired by Vista Equity Partners in 2016 Founders Chuck Geschke, John Warnock Phil Fernandez, Jon Miller, David Morandi Industry Position Adobe Experience Cloud gives companies Marketo is the leading provider of marketing everything they need to deliver well-designed, engagement, analytics and attribution software.
    [Show full text]