{"id":16430,"date":"2020-09-09T17:27:16","date_gmt":"2020-09-09T17:27:16","guid":{"rendered":"https:\/\/www.webscale.com\/?post_type=blog&p=16430"},"modified":"2023-12-29T16:05:37","modified_gmt":"2023-12-29T21:05:37","slug":"part-1-challenges-hosting-magento-progressive-web-app","status":"publish","type":"post","link":"https:\/\/www.webscale.com\/blog\/part-1-challenges-hosting-magento-progressive-web-app\/","title":{"rendered":"Part 1: The Challenges of Hosting a Magento Progressive Web App"},"content":{"rendered":"

The following conversation took place on the eCommerce-Aholic channel, between the show\u2019s host TJ Gamble, CEO of Jamersan, and Jay Smith, Founder and CTO of Webscale. In Part 1, we\u2019ll dig into the key differences between PWAs and conventional applications, especially when it comes to how they are hosted and the user experience they can deliver.<\/em><\/p>\n

The content has been lightly edited for consistency.<\/em><\/p>\n

TJ: How different is hosting a PWA to a conventional ecommerce application?<\/strong><\/p>\n

Jay:<\/strong> So, I see this as a bigger topic in terms of how we’re building web applications today, and this transition to what I call more of a micro-services approach, effectively abstracting away the ecommerce application as a whole. In the past, we had a monolithic application which did everything and it rendered HTML. It handled all your backend operations, communications with the database, and outside services, and it was a fairly big, complex piece of code.<\/p>\n

Now, what we’re seeing with PWA, and this micro-services transition, is a focus on the individual services that handle single responsibilities within the application. That certainly puts some emphasis on Webscale as the proxy layer in front of that, being able to route and deliver various functionalities from different backend services.<\/p>\n

One of the things we’ve added is the ability to route to external services, namely things that aren’t hosted by you. For example, our customers want to manage their user experience from a platform that they own and have control over, but they don’t necessarily want to take responsibility for the shopping cart. So they’ll outsource the shopping cart to Shopify or someone similar. Webscale allows them to bring those pieces together so that the backend application, ie: the shopping cart piece, can be wherever it needs to be in the universe, and it can be purchased as a SaaS offering, and hosted by us, within the context of that application. But it’s only delivering one specific function within the application. Then you have the front end rendering side, whether it’s server-side or client-side, that code is delivered from a different location.<\/p>\n

Webscale allows the system to be broken down to its component parts, and acting as a proxy service in front of that, we\u2019re able to bring it all together and present a single URL space to the internet as if nothing had changed.<\/p>\n

TJ: In the Magento space, there are really three different PWA scenarios, one being Magento with PWA Studio which is tightly coupled. Theoretically, you might be able to host those in one space. Then you’ve got open-source software with a loosely coupled frontend where maybe they’re hosted in the same space or not. And then you have SaaS backend with a PWA frontend.<\/strong><\/p>\n

In any of those scenarios, for instance with Magento and PWA Studio, would you host those in the exact same hosting? Could I go get a shared host and host Magento with PWA Studio? Or how complicated do I have to get to try to host a tightly coupled PWA like that?<\/strong><\/p>\n

Jay: <\/strong>At Webscale, we\u2019re big believers in single responsibility. So we’ll put Magento in its own cluster and then we’ll put PWA Studio in its own cluster and manage the routing between the two. A lot of what PWA Studio is doing at run time can be accomplished through our Web Controls<\/a> and the Webscale proxy layer. There we can provide security, routing and control as well as caching and performance improvements, making it all much simpler for the merchant. At that stage, it starts to look more like just a traditional Magento hosting experience.<\/p>\n

TJ: Are there any differences if I use SaaS? For example, if I use Shopify or BigCommerce and then build a fully-customized PWA or use some frontend framework, is there a difference when you’re trying to host a PWA versus you being in control of both the pieces?<\/strong><\/p>\n

Jay:<\/strong> There is. The decision that the merchant has to make is whether the client is going to make a direct connection to that SaaS offering, or if it’s going to come back to the origin, and route it to the SaaS offering from there. At Webscale, we have the ability to use an alternate backend that can be a third-party service on the internet. We call this Site Splicing<\/strong><\/em> and it allows you to actually hide the fact that your backend is a Shopify shopping cart through the proxy layer with us. What I like about that, is that it allows the merchant to make changes and reconfigure as needed, without having to expose to the internet how they’re choosing to build their application. That\u2019s one of the primary considerations.<\/p>\n

This hosting experience is also a bit simpler, because you’re no longer dealing with the requirements of a Magento application, that you have to host as well, and which has its own set of complexities and challenges. You can actually just use somebody else’s service and then focus on the marketing piece or user experience of your application.<\/p>\n

TJ: With PWA theoretically, we’re going to push a lot of the processing to the browser. And it’s going to load less data, it’s supposed to be more efficient with data transfer. It’s really focusing on hitting APIs. So theoretically, you should be able to host a site of the same size, if it’s an optimized PWA, for less server resources. But then we’re going to add complexity to our hosting environment, so how are you seeing costs change for merchants in regards to hosting a PWA?<\/strong><\/p>\n

Jay:<\/strong> So on the PWA side, if you shift the complexity into API calls, we’re able to cache more. That’s going to help time to first byte, and the performance of the site itself, which is great. That obviously has an added benefit of reducing the load on the servers delivering the PWA component. These now all look like static assets, and I can cache all of these static assets at the proxy layer, and into the CDN, allowing for a reduction in the delivery expense.<\/p>\n

It’s great that we’re shifting most of the execution and the heavy lifting to the browser, because every new user to the site will bring their own compute resources. So, your scaling’s not done on the server side, it\u2019s on the client side, and with more clients comes more compute to service those requests.<\/p>\n

The downside is that those compute resources vary in their abilities. It\u2019s not free money. If you have a very complex JavaScript for example, and there’s a lot of code that needs to be executed on the browser, the old iPhone your customer is using is going to get pretty stressed, and your site\u2019s ability to service or provide a great user experience is at risk and somewhat out of your control.<\/p>\n

It is becoming more complex. Webscale, as the host, is providing software delivery to the internet, while the developer has to think about where this software is going to be running, in what browser, on what computer hardware, and so on. The emphasis will be on what the user experience is going to be like, on that older generation iPhone versus say a desktop, with the latest and greatest.<\/p>\n

Merchants need to make good choices around understanding the capabilities of the device that they’re rendering on and how that device is behaving for them.<\/p>\n

Be sure to check back for Part 2, where Jay and TJ will discuss the cost implications of moving to a PWA, from both a hosting and development perspective, and for the full livestream interview, click here.<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

The following conversation took place on the eCommerce-Aholic channel, between the show\u2019s host TJ Gamble, CEO of Jamersan, and Jay Smith, Founder and CTO of Webscale. In Part 1, we\u2019ll dig into the key differences between PWAs and conventional applications, especially when it comes to how they are hosted and the user experience they can […]<\/p>\n","protected":false},"author":5,"featured_media":256042,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","rank_math_lock_modified_date":false,"_aioseo_description":"","_aioseo_keywords":"","_aioseo_og_article_section":"","_aioseo_og_article_tags":"","_aioseo_og_description":"","_aioseo_og_title":"","_aioseo_title":"","_aioseo_twitter_description":"","_aioseo_twitter_title":"","_author_photo":"field_6513304084a08","_doc_url":"","_dp_original":"","_et_autogenerated_title":"","_et_body_layout_enabled":"","_et_body_layout_id":"","_et_builder_dynamic_assets_loading_attr_threshold":"2","_et_builder_module_features_cache":null,"_et_builder_version":"","_et_default":"","_et_enabled":"","_et_footer_layout_enabled":"","_et_footer_layout_id":"","_et_header_layout_enabled":"","_et_header_layout_id":"","_et_pb_ab_current_shortcode":"","_et_pb_ab_subjects":"","_et_pb_built_for_post_type":"","_et_pb_custom_css":"","_et_pb_enable_shortcode_tracking":"","_et_pb_excluded_global_options":"","_et_pb_first_image":"","_et_pb_gutter_width":"","_et_pb_module_type":"","_et_pb_page_layout":"et_right_sidebar","_et_pb_page_z_index":"","_et_pb_post_hide_nav":"default","_et_pb_row_layout":"","_et_pb_show_page_creation":"","_et_pb_show_title":"on","_et_pb_side_nav":"off","_et_pb_static_css_file":"","_et_pb_truncate_post":"","_et_pb_truncate_post_date":"","_et_post_bg_color":"#ffffff","_et_post_bg_layout":"light","_et_template":[],"_et_theme_builder_marked_as_unused":"","_et_use_on":"","_gallery_link_target":"","_global_colors_info":"","_lh_copy_from_url-original_file":"","_version_history":"","_wp_old_date":[],"_wpcode_auto_insert":"","_wpcode_auto_insert_number":"","_wpcode_conditional_logic":[],"_wpcode_conditional_logic_enabled":"","_wpcode_library_id":"","_wpcode_library_version":"","_wpcode_location_extra":"","_wpcode_note":"","_wpcode_priority":"","_wpcode_shortcode_attributes":[],"_wpmf_gallery_custom_image_link":"","ao_post_optimize":[],"author_photo":"255878","doc_url":"","et_enqueued_post_fonts":{"family":{"et-gf-lato":"Lato:100,100italic,300,300italic,regular,italic,700,700italic,900,900italic"},"subset":["latin","latin-ext"],"cache_key":"{\"gph\":0,\"divi\":\"4.24.1\",\"wp\":\"6.6.2\",\"enable_all_character_sets\":\"false\"}"},"rank_math_contentai_score":{"wordCount":"100","linkCount":"0","headingCount":"100","mediaCount":"62.22"},"rank_math_description":"In Part 1, we\u2019ll dig into the key differences between PWAs and conventional applications, especially when it comes to how they are hosted and the user experience they can deliver.","rank_math_facebook_image":"","rank_math_facebook_image_id":"","rank_math_internal_links_processed":["1"],"rank_math_og_content_image":[],"rank_math_seo_score":"18","rank_math_title":"","version_history":"","wp-smpro-smush-data":[],"wp-smush-animated":"","wpmf_filetype":"","wpmf_order":"","wpmf_size":"","_":"","_bj_lazy_load_skip_post":[],"_divi_filters_post_type":"","_et_dynamic_cached_attributes":{"sticky_position":["top"],"use_custom_gutter":["on"],"fullwidth":["off"],"button_icon":["$||divi||400"],"social_network":["facebook","twitter","linkedin","youtube","last_fm"],"header_2_font":"|800|||||||","header_2_font_size":"34px","header_2_text_align":"center","animation_intensity_slide":"10%","animation_duration":"800ms","animation_delay":"15ms","animation_intensity_zoom":"15%","animation_intensity_flip":"15%","animation_intensity_fold":"15%","animation_intensity_roll":"15%","animation_direction":"center","animation_style":"none","background_color_gradient_start":"rgba(255,255,255,0)","background_color_gradient_end":"#fafafa","custom_padding":"120px||0px||false|false","background_color_gradient_stops":"rgba(255,255,255,0) 0%|#fafafa 100%","custom_padding_last_edited":"on|desktop","custom_padding_tablet":"||30px||false|false","custom_padding_phone":"60px||||false|false"},"_et_dynamic_cached_shortcodes":["et_pb_post_content","et_pb_contact_field","et_pb_signup_custom_field","et_pb_social_media_follow_network","et_pb_section","et_pb_row","et_pb_column","et_pb_blog","et_pb_blurb","et_pb_button","et_pb_code","et_pb_contact_form","et_pb_post_nav","et_pb_post_title","et_pb_signup","et_pb_social_media_follow","et_pb_text"],"_et_pb_ab_bounce_rate_limit":"","_et_pb_ab_stats_refresh_interval":[],"_et_pb_content_area_background_color":"","_et_pb_dark_text_color":"","_et_pb_light_text_color":"","_et_pb_section_background_color":"","_job_location":"","_job_locations":"","_links_to":"","_links_to_target":"","_product_image_gallery":"","_schema_code":"","_synced_version":"","_wp_attachment_context":"","_wp_attachment_image_alt":[],"_wpie_source_url":"","_yoast_wpseo_content_score":"30","_yoast_wpseo_focuskeywords":"[]","_yoast_wpseo_metadesc":"In Part 1, we\u2019ll dig into the key differences between PWAs and conventional applications, especially when it comes to how they are hosted and the user experience they can deliver.","_yoast_wpseo_opengraph-image":"","_yst_prominent_words_version":"1","inline_featured_image":["0","0","0","0","0","0"],"job_location":[],"job_locations":"","options":"","original-file":"","post_views_count":"4","rank_math_analytic_object_id":"1989","rank_math_canonical_url":"","rank_math_focus_keyword":[],"rank_math_news_sitemap_robots":"index","rank_math_primary_category":"0","rank_math_primary_ccategory":"","rank_math_primary_job_locations":"","rank_math_primary_partners_category":"","rank_math_primary_pr_category":"","rank_math_primary_press_release_year":"","rank_math_rich_snippet":"","rank_math_robots":["index"],"rank_math_schema_Article":[],"rank_math_schema_Organization":[],"rank_math_schema_VideoObject":[],"rank_math_shortcode_schema_s-23675683-fff5-4300-88fe-da8afc8b1bb9":"","rank_math_shortcode_schema_s-307bbc91-c6b1-41aa-950d-c50d435a949c":"","rank_math_shortcode_schema_s-63a052dbc0384":"","rank_math_shortcode_schema_s-63a052dbc039d":"","rank_math_shortcode_schema_s-63a052dbc03a6":"","rank_math_shortcode_schema_s-63a052dbc03aa":"","rank_math_shortcode_schema_s-63a052dbc03b5":"","rank_math_shortcode_schema_s-63a052dbc03ba":"","rank_math_shortcode_schema_s-63a052dbc03bd":"","rank_math_shortcode_schema_s-63b6dd7d53a96":"","rank_math_shortcode_schema_s-63b6dd7d53a9f":"","rank_math_shortcode_schema_s-63b6dd7d53aa2":"","rank_math_shortcode_schema_s-63b6dd7d53aa4":"","rank_math_shortcode_schema_s-63b6dd7d53aa7":"","rank_math_shortcode_schema_s-63b6dd7d53aa9":"","rank_math_shortcode_schema_s-63b6dd7d53aab":"","rank_math_shortcode_schema_s-63b6dd7d53aad":"","rank_math_shortcode_schema_s-63b6dd7d53aaf":"","rank_math_shortcode_schema_s-63c15fcf43311":"","rank_math_shortcode_schema_s-63c15fcf43322":"","rank_math_shortcode_schema_s-63c15fcf43325":"","rank_math_shortcode_schema_s-63c15fcf43327":"","rank_math_shortcode_schema_s-63c15fcf43329":"","rank_math_shortcode_schema_s-63c15fcf4332a":"","rank_math_shortcode_schema_s-63c15fcf4332c":"","rank_math_shortcode_schema_s-63c15fcf4332e":"","rank_math_shortcode_schema_s-63c15fcf43330":"","rank_math_shortcode_schema_s-63f52c5ed40bb":"","rank_math_shortcode_schema_s-6409f40a9b7d5":"","rank_math_shortcode_schema_s-64354a3892419":"","rank_math_shortcode_schema_s-6440158136148":"","rank_math_shortcode_schema_s-6446d2f9353ee":"","rank_math_shortcode_schema_s-6446d2f9353f3":"","rank_math_shortcode_schema_s-6447c0fe4673c":"","rank_math_shortcode_schema_s-64e4d743542d7":"","schema_code":"","smush-complete":"","smush-info":"","smush-stats":[],"synced_version":"","wpmf_remote_video_link":"","_exp":"","_inc":"","_mc4wp_settings":[],"_post-subtitle":"field_5bb39e15297d0","_pwh_dcfh_contact_email":"","_pwh_dcfh_contact_form_id":"","_pwh_dcfh_form_fields":"","_pwh_dcfh_ip_address":"","_pwh_dcfh_page_id":"","_pwh_dcfh_read_by":"","_pwh_dcfh_referer_url":"","_pwh_dcfh_user_agent":[],"_section1_col1":"","_section1_col2":"","_section1_col3":"","_section1_col4":"","_section2_col1":"","_section2_col2":"","_section2_col3":"","_section2_col4":"","_section2_col5":"","_section2_col6":"","_section3_col1":"","_section3_col2":"","_section3_col3":"","_section3_col4":"","_section3_col5":"","_section3_col6":"","_section4_col1":"","_section4_col2":"","_section4_col3":"","_section4_col4":"","_section4_col5":"","_section4_col6":"","_section5_col1":"","_section5_col2":"","_section5_col3":"","_section5_col4":"","_section5_col5":"","_section5_col6":"","_section6_col1":"","_section6_col2":"","_section6_col3":"","_section6_col4":"","_section6_col5":"","_section6_col6":"","_select_author":"","_test":"","_wp_attachment_backup_sizes":[],"_yoast_wpseo_estimated-reading-time-minutes":[],"_yoast_wpseo_focuskw":[],"_yoast_wpseo_focuskw_text_input":[],"_yoast_wpseo_linkdex":[],"_yoast_wpseo_meta-robots-nofollow":[],"_yoast_wpseo_meta-robots-noindex":[],"_yoast_wpseo_primary_category":["",""],"_yoast_wpseo_title":[],"_yoast_wpseo_wordproof_timestamp":"","exp":"","inc":"","post-subtitle":["",""],"rank_math_schema_BlogPosting":[],"section1_col1":"","section1_col2":"","section1_col3":"","section1_col4":"","section2_col1":"","section2_col2":"","section2_col3":"","section2_col4":"","section2_col5":"","section2_col6":"","section3_col1":"","section3_col2":"","section3_col3":"","section3_col4":"","section3_col5":"","section3_col6":"","section4_col1":"","section4_col2":"","section4_col3":"","section4_col4":"","section4_col5":"","section4_col6":"","section5_col1":"","section5_col2":"","section5_col3":"","section5_col4":"","section5_col5":"","section5_col6":"","section6_col1":"","section6_col2":"","section6_col3":"","section6_col4":"","section6_col5":"","section6_col6":"","select_author":"","test":"","footnotes":""},"categories":[1,31],"tags":[],"class_list":["post-16430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-headless-pwa"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts\/16430"}],"collection":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/comments?post=16430"}],"version-history":[{"count":0,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts\/16430\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/media\/256042"}],"wp:attachment":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/media?parent=16430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/categories?post=16430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/tags?post=16430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}