scandipwa - Tumblr blog

scandipwa · 4 years ago

Text

ScandiPWA Toolkit — Jegors Batovs ScandiPWA Spring Meetup

Jegors Batovs is Technical Architect at ScandiPWA

I will tell you about the most recent advancements in our development toolkit and a little bit about the technologies around it.

First of all, I will tell you a little bit about the things that have been around for a while, but not many people actually know about them and use them.

ScandiPWA functionality

Plugins for functions

You can assign a namespace to a function, to a simple function, or to an error function, and then create a plugin around that function.

Internationalization mechanism

The old one that we used to have before, version 4.01, used to make you compile your project several times for several bundles, which increased the building times. For example, if you have four low locales, you needed to compile your project four times. That would take 10 minutes, 20 minutes, depends on the size of your project.

Now we have absolutely a different situation. The translation packages are supplied as chunks, that can be switched and fetched in run time and operate absolutely autonomically. That is great because it improves the building time and it enhances the experience of working with internationalization.

Template plugins

This thing is pretty new. Template plugins are great technology.

Why do we need it? To modify templates, of course. Usually, we have either PHP or HTML template for our project, that is not accessible by the plugin system because how can we modify it with a plugin system? And there is no way to add something to that template without overriding the previous template of your parent theme. The only API to interact with templates until now was overriding. Now, we have a plugin system that allows inserting some PHP directives.

We can interact with a template in PHP terms, we can add some extra nodes, PHP nodes, HTML notes, basically anything that is complying with the DOM specification.

Development tools

What are they? They are CLI and VS Code extensions. These development tools allow you to create and override resources in the blink of an eye. You can forget about writing any kind of template code manually because they will handle it for you completely. Don’t forget anything, just use our development tools and you will be good to go.

Let’s proceed to the other interesting topics of our presentation. Of course, as I mentioned, VS Code on the right and VM on the left. Pick the one you like more, use it.

What is next?

Plug.js package

What is it? Basically, ScandiPWA extension.

I think that we don’t have a name for it yet. For now, we call it plug.js. Currently, it is kept private and under its development, but it is planned to be released anytime soon.

GraphQL

The next thing that we’ve been working on recently is the better GraphQL client. We in ScandiPWA don’t really enjoy using third-party technologies, that’s why we have so much stuff implemented ourselves.

And this will be one of the tools that we use in future versions of ScandiPWA. That’s our new approach to GraphQL, basically, it’s the same approach to GraphQL, but a bit better.

ScandiPWA is a free and open-source PWA theme for Magento. You can learn more about it on its official website scandipwa.com.

ScandiPWA is a free and open-source PWA theme for Magento —

https://scandipwa.com/?utm_source=medium&utm_medium=article&utm_campaign=spring_meetup

Follow our social media accounts to be the first to know about any news and updates:

https://twitter.com/ScandiPWA

https://www.facebook.com/ScandiPWA/

#magento #pwa #scandipwa #developer

0 notes

scandipwa · 4 years ago

Text

Revolution in e-commerce with ScandiPWA — Ali Arsalan | ScandiPWA Spring Meetup

Ali Arsalan — Full Stack Developer at Aatech

Let me start with the difficulties we are facing with the e-commerce website on Magento or any other platform. It’s basically the speed and the time taking to load for the clients.

The basic issue that Magento gives us is the speed due to the slow Magento site. We are unable to get what the client is looking for. We were planning to change the Magento front-end to Vue, but it is quite difficult to deploy it and we need more resources to work with it. We were looking for some other solution which is easy to implement and easy to customize, as the customer was frustrated with speed issue, downtime and increasing bounce rate.

We found the solution in Scandi. It took us almost three months with some custom modules back-end work, reward points, and payment gateways which are totally customized.

Why ScandiPWA?

Provides responsive experience and fast loading even on slow networks;

Caches content to ensure that some content can be loaded offline;

Easy to set up;

Save 80% of costs.

Results

We see this increase in sales. Also, clients are happy with the speed; the product page and the catalog page load fast and it is easy to filter the products. People would play around with the speed and the switch from one product to another product easily, and they can navigate easily to our website. They can also search sorted lists.

Customers can check out within two minutes. So that’s a really great thing that we are we are monitoring on our end.

Future projects

Currently, we are working on a couple of more projects, one of which is a fashion brand. It is a really big name in our country. We are close to launching it also on ScandiPWA. They have a huge traffic of 25 to 50-plus-k consumers daily. I think they will also get out from the Magento slow front-end and get the Scandi speedy front end, which can help to increase their order ratio and conversion. They are also happy with the new features which we have included in that.

After that, we are also looking forward to building an electronics store which is built on ScandiPWA with a new option that is the partial payment option, where the customer can easily buy products on installments. That is what we are working on.

You can get ScandiPWA as well. ScandiPWA is a free and open-source PWA theme for Magento. You can learn more about it on its official website scandipwa.com.

ScandiPWA is a free and open-source PWA theme for Magento —

https://scandipwa.com/?utm_source=tumblr&utm_medium=article&utm_campaign=spring_meetup

Follow our social media accounts to be the first to know about any news and updates:

https://twitter.com/ScandiPWA

https://www.facebook.com/ScandiPWA/

#magento #pwa #scandipwa #b2c #magentodeveloper

0 notes

scandipwa · 4 years ago

Text

Multi-country and multi-brand eCommerce using ScnadiPWA — Som Dadhich | ScandiPWA Spring Meetup

The customer from Singapore had approached us for a multi-country, multi-brand eCommerce built on PWA. It is a holding company with over 30% of the market share in Islamic countries.

The requirements:

Multi-brand and multi-country setup (language, currency, gateways);

Mobile-first experience. Fast speed and UX;

1 month launch time;

Flexibility in terms of future customization;

No limitations in terms of design.

Due to time constraints, we did not have an option of going for a custom framework like Vue Storefront, or a completely custom React storefront store. So we were looking at options, and we had heard a lot about ScandiPWA. The biggest benefit was that we had all the features of Magento available out of the box. Otherwise building everything from scratch is just not possible at this time.

Our plan and process

We usually divide the project into two phases: an MVP, a minimum viable product, which is about 30 days, and an improved enhancement phase. Then we work on perfecting the integrations, like payment gateways, the logistics partners, the SMS, emails, WhatsApp, social logins because those are the major points that take most of the time both testing and perfecting.

To save time, there are very good third-party providers for any feature that you take up, especially the post-purchase scenario, because that does not affect the user experience, at least initially. We usually go for a third-party implementation for shipments. The end-to-end post-shipment process — the notifications, order tracking, return centers, or promised dates — is taken care of by third parties. As well, videos and user-generated content can be handled by a third party.

The client asked to keep admin side processes and customization to a minimum, and it was fine as it does not impact the user experience. We also used the default Scandi layout for the cart, checkout, and my account with only a little CSS modification to suit the theme.

Reasons to choose Scandi

Speed

Why did we choose Scandi only? The speed. Everyone is in love with the speed because everyone is used to the speed of Magento, almost a snail speed platform. We were trying to compare it with custom frameworks, with the export frame, and we saw that Scandi is still faster.

User experience

With speed comes a great user experience. Scandi first optimized it for mobile and then adapted it for the web. So it does feel like an app, and it’s faster than some native apps that we are used to using here in India.

Magento features availability

You’re not starting from scratch. You get all the features, almost 300, from Magento. You don’t feel like you’re using another platform. You’re on Magento, but you are getting the crazy speed that you always wanted.

Extensibility

This client’s biggest request was the multi-country and the multi-brand features. Scandi supports all of them, unlike Shopify or Bigcommerce.

Actively developed, supported, and documented

Other platforms do not have similar support.

Challenges

Initial setup

ScandiPWA was an absolutely new thing as we had not done a lot of development Scandi before, so we took help from a partner. Initially, it is a little difficult to get an understanding of how to customize. Also, the setup may be a little tricky.

Availability of extensions

Everyone needs the extensions so we were looking at the possible extensions. There are good ones, but not for the countries that this client was looking at. Thus, we looked at third-party extensions that we could just plug in place, making an extension for Magento. The major extensions, the payments, SMS, and emails, were developed from scratch.

Documentation/Library

Due to the novelty of the platform, there is less documentation than you would expect.

Results

We are launching with two brands, and the two brands are available in different countries. Gateway systems are completed, integrations with delivery are developed, and custom design is implemented.

We have integrated standard IO for the UGC, user-generated content, and reviews post process. And we have post notifications.

This is what is going on currently and we plan to launch it in the first week of April.

We wish the best of luck to other agencies who are looking at adopting Scandi for their customers. ScandiPWA is a free and open-source PWA theme for Magento. You can learn more about it on its official website scandipwa.com.

ScandiPWA is a free and open-source PWA theme for Magento —

https://scandipwa.com/?utm_source=medium&utm_medium=article&utm_campaign=spring_meetup

Follow our social media accounts to be the first to know about any news and updates:

https://twitter.com/ScandiPWA

https://www.facebook.com/ScandiPWA/

#magento #pwa #scandipwa

0 notes

scandipwa · 4 years ago

Text

Morland UK Case Study - Sarah Willcocks | ScandiPWA Spring Meetup

I’m going to talk to you a little bit about how we have worked with ScandiPWA for a British Manufacturer called Morland UK.

The project is not live yet, but obviously, we wanted to develop a project that would work across all platforms and all devices, irrespective of connectivity. That was one of the customer’s key requirements.

The client was looking for a solution that would allow them to service their trade customers online, as well as the end consumers, so these are people who want to actually do up their own caravans, etc. When they came to us we decided that the best possible solution for them to address their business requirements was Magento Commerce Cloud with a ScandiPWA front end.

Project goals

Mobile-first approach

Over 50% of their traffic from consumers was coming from mobile devices. But increasingly their trade customers were also wanting to actually use mobile devices to access the products and services on their website.

Consistent shopping experience

One platform should be able to deliver a consistent shopping experience, irrespective of whether their customer had iPhones, Samsung devices, Huawei devices, or any kind of Android device. The client wanted one solution that fits all, including desktop as well and tablets.

Speed

It was a major requirement for them, irrespective of connectivity. And that is one of the reasons why we suggested a progressive web app solution to them because it is in our view the most reliable way of delivering a fast user experience, irrespective of connectivity.

B2B and B2C e-commerce

B2B and B2C e-commerce from one platform was required because they have a relatively small internal e-commerce team; thus, they wanted to have one admin panel and one back office to manage.

Translatable

The client required the site to be multi-currency and multi-domain.

Complex pricing and product configuration support

The client has some very complicated pricing and product configuration requirements, which not a lot of e-commerce platforms or PWA platforms can cater for.

Timeline

To give you an idea of the timelines for the project, I would say we kicked it off in January. We had several months of defining the requirements and the designs. The development started in March. We will complete the development of the site by September.

It is a very large project, that is why it is taking so long, with very complicated requirements. In September we will conduct the quality assurance phase of the project, which is where we do the end-to-end testing. We will then train the client on how to use the site and manage it. They will conduct their user acceptance testing once they have been trained, and we plan to set the site live in November.

PWA benefits

PWAs take advantage of the features that the mobile phone operating platforms have to offer. They load faster and are more responsive.

They work more intuitively, they can operate partially or fully offline.

They offer extra features that you get with apps like push notifications.

You can add them to your home screen on a mobile device, just like you would an app.

They transfer the workload to the device, instead of relying on the web server, which is part of the reason why you can have a good end-user experience, irrespective of connectivity.

They are search engine friendly, and also they are linkable, so it retains its state when the user bookmarks or shares a URL.

Reasons to choose ScandiPWA as your PWA theme

So why ScandiPWA? There are lots of different platforms out there, and as an agency, we like to work with the best. We evaluated quite a few of them decided that for this particular merchant ScandiPWA was the best fit.

The main reasons:

Extensive support for out-of-the-box Magento features (over 54), both B2C and B2B e-commerce;

The integration of the admin interface, so it’s easy for merchants to actually manage the contents;

Wide community support for ScandiPWA as a platform;

Simple to install;

Runs very well in the Magento Commerce Cloud;

Requires less customization if the upgrade to the next release is needed.

Conclusion

PWA in our view brings together the best of website and mobile app functionality so that you can deliver a reliable, fast, and engaging experience, that increases conversion rates, sometimes by upwards of 50% across websites. Speed and usability are the main benefits that consumers are seeing when shopping using PWA.

So if you’re considering a new website, then we would definitely recommend doing it as a PWA. It will be more future proof and easier for you to meet Google’s Core Web Vitals, and therefore perform well in search engines. It will allow you as a merchant to be more agile and deliver solutions faster to market.

And ScandiPWA in particular, if you’re working with Magento is an excellent fit and we would thoroughly recommend it. Get ScandiPWA right now. ScandiPWA is a free and open-source PWA theme for Magento. You can learn more about it on its official website scandipwa.com.

ScandiPWA is a free and open-source PWA theme for Magento —

https://scandipwa.com/?utm_source=tumblr&utm_medium=article&utm_campaign=spring_meetup

Follow our social media accounts to be the first to know about any news and updates:

https://twitter.com/ScandiPWA

https://www.facebook.com/ScandiPWA/

0 notes

scandipwa · 4 years ago

Text

Advantages of ScandiPWA — Alfreds Genkins | ScandiPWA Spring Meetup

Alfreds Genkins, Multi-Functional Developer, Speaker, and ScandiPWA Creator

Let’s talk a little bit about what is going on with ScandiPWA world. First of all, I would like to tell you what’s happening in the team. We now have two teams, the core team and the core team number two.

The core team number two is now guided by Liana, product owner of ScandiPWA as she is responsible for every new version which gets released. Another part of the core team is me, Jegors, Aleksanders Rivkinds, and Dmitrijs Asanovs at the moment working to deliver to you a new ScandiPWA.

Magento theme support

There is a good question about what we’ll be doing with Magento Theme support, and that is unanswered because we will try to make sure we don’t lose any features while migrating. So we will take a look at how we can manage this.

We also have another approach to the documentation now. We have this generatable documentation, which is able to be generated from the code and from the tests.

We will make you another very cool document covering all the modules. We are going for a Virtual UI approach. Virtual UI approach means that you can swap libraries on the go. If you are on CSS, you can easily swap to UI while having all of the theme interworkings enabled.

Scandi 2

Maybe that Scandi 2 thing, it is a little bit far away. It is currently in the beginnings of development. We defined the architecture, documented the architecture, created the tools for us to go forward, added support for Next.js into our pluggable system.

Create Magento App

Now when you want to set up Magento, you just need to call one single command. It might require some prerequisites, like docker installation PHP and some libraries for building PHP. But even that might come into the void at some point because we are making sure now that the application prompts you to install those features. Now you can finally get your real Magento 2 instance with or without ScandiPWA, running in terms of minutes.

We are packing those solutions into Create Magento app. We do quite a lot of surveys around the community about Create Magento app to make sure it’s very consistent.

The app is already available. It is published. So if you are still using the docker approach and planning to go for a new ScandiPWA version, consider going for Create Magento app.

Advantages of ScandiPWA

The largest advantage we have is the extensibility and the number of features. That is why people choose us, and the companies choose us in the first place.

First of all, we have a solid portfolio, a solid community behind this product which helps us to evovle. Secondly, we have a very stable release cycle and the largest amount of coverage in terms of Magento features. We support more than 95% and every release has something to offer.

The largest thing as well is the middleware. We are having no middleware, and you do not need to write anything for your data synchronization, just use your Magento 2 as your source. That is as simple as it is.

In short, ScandiPWA is better because of development experience, the number of features supported, and absence of middleware. We got here the tools you work with. You do not need to download any GIT source code. You do not need to modify the source code. You build on top of it. The migrations are simple. Development experience is the best offered currently on the market.

How can you transform your existing Magento sites into ScandiPWA storefront?

That is a hard question to answer because your previous stack is absolutely different from your current stack. What you might require is to learn React and templating in it. But possibly we might make it easier by creating a tutorial repository.

We have tutorial videos which are covering simple stuff: simple integration, simple modifications. But no longer you will be looking at that. We will provide you a course of complex examples of integration like the whole project done and ScandiPWA migrated from the original Magenta 2. Then you might use it as a reference. It will showcase how you can do stuff, how it’s done, why it’s done, how the ticket was created, how much time it took to implement.

Are we getting more language support soon?

That all depends on you. We are relying on the community for language support. We would love to see more language packs. If you are able to translate in your languages some JSONs for us, we will be very happy.

ScandiPWA is a free and open-source PWA theme for Magento. You can learn more about it on its official website scandipwa.com.

ScandiPWA is a free and open-source PWA theme for Magento —

https://scandipwa.com/?utm_source=tumblr&utm_medium=article&utm_campaign=spring_meetup

Follow our social media accounts to be the first to know about any news and updates:

https://twitter.com/ScandiPWA

https://www.facebook.com/ScandiPWA/

0 notes