Browsed by
Category: Progressive Web Apps

New PWA Themes with React, Redux & Semantic UI

New PWA Themes with React, Redux & Semantic UI

As part of our effort to launch Progressive Web Apps based on new technologies, we are rebuilding some of our themes with a new tech stack: ReactJS, Redux and Semantic UI.

Our Base, Mosaic and Folio apps were among the first launched and are part of the popular Freelancer bundle. The original versions are based on Sencha Touch and we felt that we could greatly improve their performance by rebuilding them in React.

Here is the full new tech stack:

We have a 85% code coverage rate with unit tests and we’re working on improving this rate.

We are also integrating the apps with the new WordPress REST API. This means the WordPress Mobile Pack PRO plugin’s backend will be upgraded to support namespaces and custom API routes. The new plugin version will be available for WordPress 4.8+ running on PHP 5.4 and above.

The Base-React, Mosaic-React and Folio-React PWAs are already in the alpha stage and will fully replace the Sencha apps by the end of the year. If you are already using one of the Sencha apps, your WordPress Mobile Pack PRO plugin will be automatically upgraded to use the React versions.

If you would like to have early access to the new apps, you can also pre-order them now at a discounted price.

Co-founder and CTO at Appticles.com. Likes to get involved in various activities to help women get into programming/coding, but also found their own businesses.
Progressive Web Apps and Accelerated Mobile Pages – What is Holding WordPress Back?

Progressive Web Apps and Accelerated Mobile Pages – What is Holding WordPress Back?

Having been involved in building Progressive Web Apps from before they were even called Progressive Web Apps, we believe that everyone should use JavaScript to build amazing user experiences on the web. This has been our mantra in the last few years and we’re sticking to it :).

However, using Content Management Systems (and in particular WordPress) as backend / APIs has proven a challenge. This is mostly due to the clash between technologies (client vs. backend rendering) and the large ecosystem of plugins / themes that surround WordPress. The value of WordPress is not only its powerful core, but all those widgets that you can install and enhance the functionality of your WordPress site. Most of these are plug & play. At the same time, I have yet to see a plug & play PWA with a 100% score on Lighthouse. Wherever you see success stories (ex. Twitter app), they also involve a lot of custom work.

So, where does that leave us? We don’t pretend to have all the answers or a magic, silver bullet that can remodel your WordPress website into a 100% PWA. However, we believe that by taking a more detailed look at the technology behind WordPress, PWAs and AMP, we can come up with ideas on how to close the gap between them. Below, you’ll find a list of 5 key points that we believe should be addressed to get us moving in the right direction.

1. Server-side rendering vs. client-side rendering

WordPress themes & plugins use server-side rendering. If you’re not familiar with the differences between server-side and client-side rendering, you can read about it here. In short, WordPress themes / plugins need a server to run the code and produce an output (HTML & CSS code).

In contrast, the PWA standard doesn’t impose a particular use of technology for implementing such an application. Most PWAs are built on JavaScript libraries / frameworks and are thus Single Page Applications (SPAs). It’s also possible to build Multiple Page Applications as PWAs, however the architecture is heavily customized. Here you can find a presentation from Google I/O 2018, describing the architecture of such a PWA implemented using a NodeJS / Express.js server and service workers. This can be even more intimidating compared to SPAs and it still requires writing JavaScript code, at least for the service worker.

So, what happens when we combine WordPress’ server-side rendering with a SPA? Well, we don’t – we have to make the choice between generating the HTML & CSS code on the server (server-side rendering) or letting the browser render that code (client-side rendering). In WordPress Mobile Pack, we use a special WordPress theme that loads only on mobile browsers. It strips down any WordPress code besides the bare minimum required to load the PWA assets (bundled JavaScript and CSS). It then becomes the responsibility of the browser to fetch the content (posts, pages, categories and so on) from WordPress’ REST API.

2. Limitations of the REST API

We strongly believe that the inclusion of the REST API in the core has opened the door for building amazing apps on top of WordPress. However, as it stands today, the functionality of the REST API is limited compared to all other things that you can do from the WordPress admin area. Just think for example about customizing the menu for your WordPress site. You can go to Appearances > Menus and do just that, your responsive theme will easily adapt to the changes.

Yet, there is no endpoint that can help export those settings to a PWA. The REST API functionality is limited to retrieving posts, pages, categories, etc. and some basic settings. So, a trivial task that is available to all responsive themes is cumbersome for a PWA. One solution is to extend the functionality of the REST API and create new endpoints (there is some work being done in that direction here). This doesn’t change the fact that we’ll have to jump through some hoops to integrate our PWAs with basic WordPress features.

3. Page Builders & Widgets

Who doesn’t love an easy-to-use page builder? These plugins promise to make our lives easier and just by using drag-and-drop we can make our website look the way we want. It’s no wonder their popularity is increasing.

The majority of these plugins rely on server-side rendering. They also insert additional JavaScript & CSS code and heavily depend on the page’s context to properly render a layout. Well, adding JavaScript code (like a widget) inside other JavaScript code (PWA) is a recipe for disaster. The embedded JavaScript code will not be executed because it’s not loaded directly in the browser.

Not to mention that the REST API doesn’t even export some of the shortcode used by page builders – which is normal because that shortcode doesn’t make sense outside of a responsive theme’s context.

4. Service workers support

Service workers are a big part of implementing a PWA. They help provide all that fancy stuff – like caching / offline mode, add to homescreen and web push notifications.

One caveat? They must reside on the root domain of your website – even if your WordPress install exists at yourdomain.com/blog, the service worker must be hosted directly on yourdomain.com. And they are JavaScript files. You might think “what’s the big deal, I’ll just copy the service worker file to my theme folder”. Well, as I already mentioned, WordPress uses server-side rendering, which makes it possible to load content from a theme folder even when in the browser you’re accessing the home page. But JavaScript files are different – their path is not changed when they are loaded by the browser. And, for very good reasons (think security!), a theme or plugin doesn’t have access to write files in the root folder of your WordPress installation.

So, what we can do? Well, we can manually copy the service worker file using FTP. But I do hope that WordPress comes up with a better solution in the future. I don’t want to be stuck forever copying my service worker whenever WordPress code is updated.

5. Lack of transparency on how SEO works for SPAs

The lack of transparency when it comes to search engine optimization is one of the main reasons for the slow adoption of SPAs. Even though Google announced that its bots can crawl JavaScript code a few years back, this doesn’t change the fact that many people still look at their Google Webmasters Search Console and see all kinds of problems in there.

Some details surfaced last year, mainly the fact that the Googlebot uses Chrome 41 for rendering. Also, at this year’s Google I/O, we could take a sneak peak on how Google Search works and why SPAs are not as efficient as basic HTML/CSS websites when it comes to SEO. There was one very important insight that was shared:

“The rendering of JavaScript powered websites in Google Search is deferred until Googlebot has resources available to process to content.”

The recommended solution is to do server-side rendering only for bots, which if you ask me, sounds like a hassle because we end up maintaining two different versions of the same content. I do hope there’s a better solution in the making, because this one doesn’t sound good at all.

Conclusion

The good part about all of this is that Google is definitely making steps into closing the gap between its technologies and WordPress. There was another interesting presentation at Google I/O that you should definitely watch: “Make your WordPress site progressive“. The approach is very interesting – using AMP and the Gutenberg editor to build WordPress websites. It looks like the WP AMP plugin is getting a lot of love recently and there are some very cool use cases that can be built on top of it.

Even though there is no silver bullet for solving the issues I have mentioned in this article, I do hope we’ll see many more cool PWAs being built on top of WordPress, taking advantage of the CMS’s popularity and versatility.

Co-founder and CTO at Appticles.com. Likes to get involved in various activities to help women get into programming/coding, but also found their own businesses.
What could 2018 bring – 10 mobile SEO predictions to look after

What could 2018 bring – 10 mobile SEO predictions to look after

Let’s face it: desktops are no longer the most used when it comes to accessing the Internet. People are constantly on the go and rely on the mini PC in their pocket: the smartphone. It’s been a while since Google revealed that the number of searches made from mobile devices is bigger than the number of desktop searches, so this doesn’t come as a surprise.

Webmasters are also aware of this, so they’re doing their best in order to deliver the best user experience. And when it comes to SEO, they’re now doubling their efforts, since they have to optimize for two different platforms.

Like every year, the community is talking about what we could expect from this year in terms of search engine optimization. We’ll leave the talk about desktop SEO for another time because today we’re completely focusing on mobile SEO!

There are a lot of speculations regarding this topic, so I’ll try to avoid the so-called rumors that don’t have any arguments to rely on. But enough with the chit-chat, let’s see what we should look forward to seeing in 2018…

The Mobile First Index, coming soon to a smartphone near you

In 2017, Google ran a lot of tests and it looks like everything went pretty good, as the Mobile First Index is expected to start rolling out soon. What’s this all about, you’re asking? It’s basically a new method of indexing and ranking search listing, making rankings to be based on the mobile version of a website’s content.

Now don’t act surprised, I’ve already told you that there are way more searches made from mobile devices.

If you weren’t aware of this update, now it would be the best time to update your site and make it responsive. That is, if you still want to rank well.

A new SERP layout

Even though we both hate them, ads are here to stay. Even more, we might as well see more of them, since Google is always looking for ways of increasing its advertising revenue.

One of them will imply changing the SERP layout, by eroding organic real estate. But this doesn’t come as a big surprise since we’ve already seen a few changes in this direction, consisting in expanded text ads, smaller ad labels, ads in the map pack or new ad extensions.

No more Map spam!

Over the past months, we could notice a real phenomenon called “map” spam. Basically, companies were loading keywords into their business names, just to appear in local map results. And yes, you guessed it, they weren’t even close to those areas.

But Google figured this out, so they’re expecting to take measures, in order to restore the integrity of the service. If you did something similar, expect some rough verification processes, alongside a penalty.

Serious penalties for ad-heavy sites, with poor content

If you’re familiar with SEO updates, you should know that this is already being done for desktop variants. However, it’s present on our list with mobile SEO predictions, meaning that Google is planning to crack down on websites displaying a lot of ads with poor content this year.

We’re talking about intrusive pop-ups and nasty interstitials, which, if kept, will drag mobile websites down in SERPs.

If we’re allowed to take a wild guess, we will also see complete redesigns for a lot of websites after this update will start rolling out, as webmasters will want to offer a top user experience.

Progressive Web Apps will be everywhere

Over the past years, PWA – short for Progressive Web Apps – were actually on the rise. And once Google’s Mobile First Index started gaining territory, these magical apps gained even more momentum.

In 2018, PWAs will be the best solution, in terms of costs, to offers users a rich and engaging experience, without the need of visiting the Play Store or App Store.

But hey, don’t think that native apps will soon meet their end, but considering the current trends and the fact that the future of the Web is definitely on smartphones, PWAs, alongside Google’s ‘passion’ for mobile-first, this would be a win-win solutions for both users and publishers, combining a unique user experience with an effective marketing tool.

More structured data

If you want, you can call this a new SERP feature. Yeah, this makes sense.

Google wants to always deliver the most qualified answers to your queries. Therefore, the search engine giant will increase the use of structured data. Simple as that.

2018 could be the year of voice searches and interaction, through non-traditional devices, like Amazon Echo, Google Home or even Android Auto. A well marked-up content is definitely ideal for these!

Cross-Device Convergence can become a real thing

Until now, everybody was after responsive web design. And they should keep doing it, since it’s essential in the era of the mobile first index.

However, this year we could see people relying on cross-device convergence, which allows them to move their data, seamlessly, across all their devices: smartphones, desktops, tablets, laptops and so on. Consider this when you’re optimizing for mobile.

Searches will be made by voice

A few moments earlier, I was saying that 2018 could be the year of voice searches and interaction. This will happen because people will stop typing queries and ask personal assistants for the stuff they want to know instead.

Amazon made its Alexa assistant accessible to everybody and it’s planning to do this on a larger scale. Google is also doing serious progress in this direction, while Apple could also join the club, with their speculated HomePod.

Users will now look for voice-based interaction, so marketers will be forced to create new solutions to gain more customer loyalty. And this applies to mobile users as well.

Wrap-up

2018 will be a very important year for search marketers, especially for those who are focusing on mobile. The search engine giant going by the name of Google is aware of people’s increasing use of mobile devices and its doing everything possible in order to deliver a high-end experience and the best results. And search marketers will want their results to show up first.

These are just some of the things expected to happen this year with mobile SEO, based on the latest speculations. What are your thoughts on this? Do you think that something else notable will be introduced? Let us know your thoughts, by dropping a few lines below!

Your mobile pages need to be fast in 2018, says the Google Speed Update

Your mobile pages need to be fast in 2018, says the Google Speed Update

We’re living in the age of speed and people want to do things as fast as possible. And they’re not alone, since Google wants pretty much the same thing, especially when it comes to your mobile browsing experience.

This week, the search engine giant announced a new ranking algorithm, tailored for smartphones. To be more specific, we’re talking about mobile search. Because, in case you still don’t know this, the number of searches made on mobile devices has surpassed searches made on PCs. Let that sink in for a while.

Read More Read More

Year in Review and What to Expect from 2018

Year in Review and What to Expect from 2018

2017 was the year we doubled down on Progressive Web Applications and we did that by concentrating our efforts on building more PWA themes for our WordPress Mobile Pack plugin and also launching 3 new related WordPress plugins: Progressive Web Apps, PWACommerce and WP AMP Themes.

As for our flagship product, WordPress Mobile Pack, here are some 2017 numbers:

  • 6 major releases: January, March, April, May, August and September.
  • ~100,000 downloads
  • v2.0 has 35,3% active installs, v3.0+ has 9,7% active installs; there’s also a legacy of 31,8% active installs still on v1.0+
  • Approximately 2,500 support conversation over e-mail, Intercom.io (the customer support system we use), via GitHub or WordPress public repositories
  • A total of 23 posts on our blog
  • Our tweets earned 180,000 impressions last year

We’re also proud that we had the opportunity to give talks at WordCamp Bucharest and Athens, evangelizing Progressive Web Apps in the WordPress community. You can watch below the “Building an E-commerce Progressive Web App with React and WooCommerce” presentation, delivered by our CTO, Alexandra Anghel:

In terms of technology advancements, a big question mark last year gravitated around Apple and the support of service workers on Safari. With the introduction of Safari Technology Preview 46 for macOS Sierra and macOS High Sierra that seems to be heading in the right direction.

Service workers could find their way onto iOS devices in 2018, opening up the web for a whole new range of possibilities. Already available on Android, some sites have begun to take advantage of service workers to provide browser-based push notifications.

As far as we’re concerned, we’re dedicated to helping developers out there built awesome Progressive Web Applications, whether that’s on top of a popular CMS (WordPress, Drupal or Joomla), eCommerce platforms (WooCommerce, Magento or Shopify) or any other 3rd party API and with that in mind we’ve already planned some interesting partnership throughout 2018. More to come soon.

Here’s to a productive 2018 for all of us! 💪

Tech-Biz in between guy. CEO at WPMobilePack.com. Organizer at BucharestJS & JSHacks. Passionate about entrepreneurship. Love to play 🎾, squash and 🏓.