Nov 08 2018
Nov 08

What do you get when you put together: Drupal 8 + AI + UX? Drupal8's content management features and integration capabilities, AI, for storing and interpreting data and building a predictive model and UX for anticipating user behavior while adding a “human touch” to the equation? You get predictive UX in Drupal!

Is it possible? Can we implement predictive UX in Drupal and thus create anticipated user experiences that:
 

  • help you deliver meaningful content only    
  • simplify user choice
  • simplify users'... lives?
     

But how does machine learning actually power these predictive user experiences? What's the whole mechanism behind?

And how is predictive analytics UX any different from... personalization? 

Are there any “traps” to be avoided when using the same event data to make informed decisions on the customer's behalf? 

And last but not least: what makes Drupal 8 the best fit for predictively serving content?
 

1. What Is Predictive UX More Precisely?

“Less choice, more automation.”

Or: Anticipating users' needs and delivering them precisely and exclusively the content they need (when they need it).

In other words: creating those predictive user experiences that anticipate and meet your customers' needs...

Which one of these 2 possible definitions do you prefer?

Or maybe you'd like a more “elaborate” one:

Predictive UX means leveraging machine learning and statistical analysis to make informed decisions for the customer.

And if we are to turn this definition into a mathematical equation, it would go something like this:

machine learning (predicting) + UX design (anticipating)= predictive UX (based on a predictive or anticipatory design)
 

2. But Isn't This Just Another Word for “Personalization”?

As compared to personalization, predictive UX goes beyond tailoring content to users' past choices:

It actually makes decisions on their behalf.

It's not limited to leveraging data in order to deliver dynamic content. Which would automatically call for heavy manual work.

Instead, predictive UX is AI-driven, thus automating decision making on the user's behalf.
 

3. How Does Predictive Analytics Benefit You and Your Customers?

Here's an empathy exercise for you:

You're a mobile app user who's being constantly “flooded” by heavy streams of disruptive information through push notification, by text or by email. Or you're an online customer faced with a discouragingly “beefy” set of options as you're about to order food for lunch. There are so so many irrelevant options that you're striving to make your way through till you find the dish that really suits your preferences... that you just feel like closing the app and hitting the closest resto instead...

So, what if:

  • your app could... tell what you want to have for lunch and display the most relevant options only?
  • you would receive app alerts or push notifications in precisely the most appropriate moments (time of the day, of the month)?

It would:

  1. make your life so much easier
  2. improve your overall user experience 

As a company, by leveraging predictive analytics to deliver relevant user experiences only you'd be winning your customers' loyalty.

You'd be simplifying their lives, after all...
 

4. Leveraging Machine Learning to Create Predictive User Experiences

What's the whole mechanism behind the creation of predictive user experiences?

How is the machine learning technology/tool leveraged to predict user behavior?

It's no more than a 3-step sequence:
 

  1. you first define the problem (using machine learning terms)
  2. gather data in a suitable format
  3. put together a model 
     

For instance, here's a machine-learning-based recommendation system deconstructed:
 

  • content-based recommendation: recommending items based on similar characteristics
  • collaborative filtering: recommending items/services based on other customers' preferences (customers with similar past choices)
     

Note: more often than not it's a mix of these 2 types of recommendation systems that you'll find.
 

5. Predictive UX: 4 Common Sense Principles to Consider
 

5.1. Simplify the UI: keep the most relevant design elements and meaningful content only.

Instead of forcing customers to make too many choices, to scan through chunks of content, go for a minimal interface! Trim down the “irrelevant fat” and keep the essential.

Leveraging machine learning and statistical techniques, you should know by then what's essential and meaningful in terms of information and functionality for your users.
 

5.2. Disrupt the all-too-familiar patterns now and then.

In other words: don't get trapped into the “experience bubble”, where you keep recommending the same familiar options and encourage the user to make the very same choices over and over again.

Consider adding disruptive layers, now and then, “tempting” them to try something new, something different.
 

5.3. Avoid forcing those most relevant options on the user.

OK, so you have the data at hand, you're leveraging that machine learning algorithm that anticipates:
 

  • what the user needs
  • what the user wants
  • what the user's going to do next
     

That doesn't mean you should overlook that:

It's always the customer who makes the final choice!

So give them enough options to choose from! Put him/her in full control of the final decision-making process!
 

5.4. Create predictive user experiences that are helpful, not annoying

In other words: when it comes to push notifications, choose the most appropriate time (if you're a retailer, you can't possibly anticipate that anyone would read about your promotion during work hours).
 

6. Predictive UX in Drupal: What Makes Drupal 8 the Perfect Fit?

There are some particular characteristics that make Drupal the perfect “teammate” for a machine learning tool:
 

  • its content management features and (huge amounts of) data storing and maintaining capabilities
  • its API-first approach, which makes third-party integrations conveniently easy; you can integrate Drupal with any system providing an API and an interface 
  • the “decoupled architecture” approach, which enables Drupal to serve content in various ways
     

Now, just think about it:

Analyzing that huge volume of data, stored on your Drupal website, and leveraging it, using a machine learning tool, to create anticipated user experiences! Think of all the emerging possibilities of implementing predictive UX in Drupal!
 

7. And How Do You Implement Predictive UX in Drupal?

First of all: choose your machine learning tool.

Now, let's say you will have chosen to go with Apache PredictionIO for obvious reasons:
 

  • it's open source
  • it “spoils” you with a set of customizable templates
  • a full machine learning stack
  • the tool's also conveniently easy to deploy as a web service
     

Now, let's have a close look at the Drupal & machine learning tool interaction:

The Event Server collects data from your Drupal app/website — provides it to the Engine —this one reads it — leveraging machine learning, it uses it to put together a predictive model — one that it then sends over to your Drupal app/website — upon a query via REST

Et voila! A predictive result is sent to your Drupal website or application, one that will power a predictive user experience.

Now, since we've been talking about the event data that's being sent from Drupal to the machine learning tool and further “exploited” for building that predictive model, you should know that it comes in “2 flavors”:
 

  1. explicit: the user will have already rated or bought an item, so you have explicit information about his/her preferences 
  2. implicit: the already available information is being leveraged, since there's no past choice or user feedback to analyze for anticipating his/her needs
     

The END! What do you... predict:

Will we be witnessing more and more Drupal 8 websites leveraging predictive UX and, implicitly, machine learning technology, to create anticipated user experiences?
 

Photo by David Travis on Unsplash.

Sep 21 2018
Sep 21

The media management experience had been one of the well-known sources of frustration for Drupal content editors for a long time. For, let's face it: Drupal's out-of-the-box media support was just... basic. But not anymore: there are new exciting features for media handling in Drupal 8.6.0 that will dramatically change the way you manage your media assets on your Drupal website!

Now, let's take a sneak peek at these most-anticipated media handling features that Drupal 8.6.0 comes equipped with:
 

  • adding media from a remote source
  • adding various types of media
  • embedding Youtube and Vimeo videos in the content (via URL)
  • easily accessing and reusing the existing media
  • uploading new media types right out of the box
     

And this is almost... overwhelming:

From almost no built-in media support in Drupal, for so many years, to a whole set of modern, powerful media management options now in Drupal 8.6.0.

But let's not ramble about this topic anymore and dive right in! Into the pile of new features meant to enhance the whole media management experience in Drupal:
 

But First: An Update on The Progress of the Media in Drupal 8 Initiative

The main goal of this media initiative was to:

Add a rich media support to Drupal 8.

One that would empower the content editors to easily reuse existing media assets, add new media entities and to overall gain more control (and meta information) over their media.

And there are 3 core milestones that we can trace while tracking the progress of this initiative for Drupal 8:
 

  1. adding the experimental Media module to Drupal 8.4 in late 2017
  2. leveling up this module from experimental to stable phase in Drupal 8.5.0
  3. turning it into the standard way of storing media in Drupal 
     

Moreover, starting with Drupal 8.6.0 a new key module for handling media has been added to core — Media Library — along with a few more exciting options:
 

  • quick access to the existing media assets
  • oEmbed support
  • a new media type: remote video content
     

Quite a “leap” forward, to a great media management experience in Drupal, I would say...
 

2. Welcome a New Media Type in Drupal 8: Remote Video

Let us list the 4 media types that you could add to your site's content up to Drupal 8.6.0's release:
 

  1. file
  2. image
  3. video
  4. audio
     

OK, now it's time you welcomed a new media type to the group: remote video!

Basically, as a content editor you're now able to add videos from remote sources, as well — Vimeo and Youtube — via their URLs.

Handling Media in Drupal 8.6.0- New Media Type: Remote Video

In short: you're no longer constrained to settle for the default media types in Drupal 8. No sir, now you get to create new custom ones mentioning their media sources.

Summing up: embedding new media to your website content is nothing but a two-step process: Content-Add Media.

Handling Media in Drupal 8.6.0- Add New Media Type


3. Reusing Media Is Now Possible: Media Library

One of the much-awaited features for media handling in Drupal 8.6.0 had been reusable media.

Well, here it is now: Media Library! It's where you can save and store all your media assets to be further reused whenever needed.

Note: do keep in mind that this an experimental module and that you'll also need to enable the Media module first things first.

“And how does it work more precisely?”
 

  1. while in your content edit screen
  2. just browse through all the media assets stored in your Media Library
  3. select the one you need
  4. and simply “inject” it into your page
     

Note: it's the “Media library” widget, added to the Media field, that enables you to scan through all your media entities straight from the content edit screen.

Handling Media in Drupal 8.6.0- Media Library Widget


4. The New “Media” Field: A Quick Way to Embed Media in Your Content

Handling media in Drupal 8.6.0 is as simple as... adding a new field — “Media” —  to the content type in question (be it news, blog post, article and so on).

Handling Media in Drupal 8.6.0- Add a New Media Field

Once the new field is added on, just go through the 5 media types available in Drupal 8.6.0 and select the one you need to embed.

Next, you can simply integrate it into your content, while in your edit screen, positioning it to your liking.
 

5. New Media Handling in Drupal 8.6.0: Youtube & Vimeo Embeds

A new media management tool that significantly improves the whole content editing experience in Drupal.

You're able to embed remote videos from Youtube and Vimeo via URL, thanks to the now added oEmbed media support.

“How precisely?” Basically, you simply:
 

  1. add that new “Media” field to your content type, as previously stated
  2. select the “Remote Video” option from the “Media Type” drop-down menu
  3. enter your video's URL in the “Video URL” field, while in your “Add Remote Video” screen
  4. and click “Save”
     

And voila: you'll have your remote video integrated into your content!

The END!

As Steve Burge from OSTraining would say:

“Finally we're getting somewhere with media in Drupal!”  

What do you think about the new features for media handling in Drupal 8.6.0? What other options and tools are there on your wishlist?

To be able to embed remote videos right from the node create page, maybe? Or to have other video platforms, as well, supported in Drupal?

Mar 09 2018
Mar 09

Building or “redecorating”? Are you putting together your online store from scratch or refurbishing your current one? No matter which one of these 2 scenarios fits your plan, you must be running your own “investigations” right now: which are the very best free Drupal 7 eCommerce themes out there?

Having a “top X” selection at hand would definitely speed up your “research”, right? A top including:
 

  • feature-rich themes, “loaded” with all those functionalities crucial for any eCommerce business, such as freedom to style your own product pages, checkout forms, custom cart, “add to cart” button, custom login and logout   
  • Drupal 7 responsive themes
  • themes empowering you with plenty of customization freedom
     

Well here's the selection of 5 Drupal themes for e-commerce that you should start your "investigations" with.
 

Jumpstart your Commerce Kickstart theme development using this base theme as a... strong “push”.

Free Drupal 7 eCommerce Themes- Omega Kickstart

A responsive subtheme, a “kickoff” to your whole theme development process on Commerce Kickcstart, Omega Kickstart comes packed with all the crucial features:
 

  • it's free
  • it's built with Drupal Commerce in mind
  • its layout is fully adjustable to any screen size (desktop, tablet, smartphone)
  • it's conveniently more user-friendly than the pre-built Omega
     

Therefore, it makes the perfect impetus for kick-starting your theme development plans!
 

2. AT Commerce, One of the “Feature-Overloaded” Free Drupal 7 eCommerce Themes 

A “full-option” Drupal commerce theme we could say!

Free Drupal 7 eCommerce Themes- AT Commerce

AT Commerce “spoils” you with out-of-the-box support for the Drupal Commerce module and Ubercart and .... “overwhelms” you with a heavy load of great features.

Now to name just a few:
 

  • it's equipped with support for a lightweight and nonetheless responsive slideshow
  • pre-built support for a Color module (Garland or Bartik); this enables you to go beyond the 3 default color combinations and, using the color picker at hand, to “color up” your theme to your liking
  • heading styles that you're free to customize
  • built-in Superfish module support 
  • custom login block
  • support for 26 regions
  • a custom and configurable responsive grid layout for the front page and the taxonomy pages (that you're free to disable if you want to)
  • Google fonts 
  • mobile support 
  • multiple image field alignment options
     

And the list is a never-ending one. 

As you can see, AT Commerce is a theme that not only that provides you with a wide range of e-commerce-specific functionalities, but with almost unlimited customization freedom, too. You'll get to put together your site's “signature” web design in no time, with no need to “get your hands dirty” in code.

From creating your “trademark” color scheme, to “playing” with all the settings that would impact the overall design and layout, your styling power is significant.

A word of caution: do keep in mind that this is a sub-theme; before you get to leverage all the above-mentioned AT Commerce features (plus a few more) on your own website, you'll need to install the latest version of the AdaptiveTheme.

It's this theme that will provide the needed core functionality
 

Here's another one of those free Drupal 7 eCommerce themes geared at helping you get a fully functional and attractive online store up and running in no time!

Free Drupal 7 eCommerce Themes- Commerce Theme

Moreover, the theme behind this theme “tempts” you with a Commerce Installation Profile bringing you, right out-of-the-box, all the needed functionalities to start selling your products.

A profile coming with built-in Drupal Commerce support and perfectly organized files enabling you to easily customize any eCommerce component you need to.
 

As its name suggests:
 

if it's a clean and “inviting” storefront that you need to implement on your eCommerce site, this is the theme to consider!

One that “plays well” with Drupal Commerce and that you can easily style up, further, adjusting it to your customer's future preferences.

Free Drupal 7 eCommerce Themes- Storefront

In short: Storefront is that Drupal commerce theme that will implement a clean and appealing interface to your Commerce Kickstart installation.

And now if I am to highlight some of its key features:
 

  • responsive techniques via media queries
  • various settings to “play with” for customizing your site framing, home grids, your color schemes, layout...
  • an entire collection of template files essential for eCommerce sites: review pane, cart block, product-node
  • options for cleaning up checkout panes, various form elements (specific to add-to-cart links, product attributes) and check-out layouts
     

Note: since this theme's compatible, out of the box, with the first version of Commerce Kickstart, the team behind it commits itself to making Storefront “play well” with the second version, as well.
 

A versatile (“fitting” all site types) and feature-rich theme “praising” simplicity.

Free Drupal 7 eCommerce Themes- Metropolis

This is a concise, yet comprehensive definition of Metropolis, one of the most popular free Drupal 7 eCommerce themes.

A more detailed definition would need to include “details” such as:
 

  • the fact that it's a tableless theme, with a 1-2 column layouts
  • it provides you with a superfish drop down menu
  • comes “equipped” with 10 collapsible block regions
  • an image slideshow, that you get to customize to your liking via the Views Slideshow
  • heading H1 optimization for boosting your SEO efforts
  • primary and secondary links
  • custom login and logout options
     

The END! These are the top 5 free Drupal 7 eCommerce themes that you should consider evaluating first. To check whether their built-in collections of eCommerce-specific features suit your own needs and goals or maybe just partially. 

Mar 01 2018
Mar 01

A great developer experience or a great user experience? A familiar web technology for you to code in or native-like performance for your users? And these are just some of the questions “taunting” you right now, while dealing with a PhoneGap vs React Native dilemma, right?

Each platform comes with its own “temptations” to... lure you in:
 

  • PhoneGap promises you an “easy life” as a mobile app developer, enabling you to use any JavaScript library and framework that you're comfortable working with
  • React Native promises you to inject native-like performance into your app and thus...  to perfect the user experience
     

So, which one to go with?
 

PhoneGap: A Brief Overview

A compromise! This is, in my opinion, the perfect word/metaphor to describe PhoneGap.

A compromise in terms of user experience and performance, since it's hybrid mobile apps that you get to build using this technology:
 

  • a JS/CSS/HTML app having a browser-based UI (giving you the freedom to work in any of your preferred web technologies)
  • that exposes native mobile device APIs and data; accessing phone components through the API navigator
     

While a more “formal” definition would go something like this:

PhoneGap is a distribution of Apache Cordova — coming with a few tweaks and custom packages —  that you can use for embedding websites in mobile apps via WebView.

In short: more than a website, yet not a fully native mobile app. A hybrid app compromise!
 

A Few Words About React Native 

In a  PhoneGap vs React Native debate, the latter would always have its native components rendering “trump card” up its sleeve:

For a React Native-powered app is written in JS, like a PhoneGap one, yet it doesn't just render a webview, but REAL native components instead!

And that, my friend, would also win over users: it's better user experience and zero compromises on performance that you get “rewarded” with for using React Native.

You could also take this mobile app development platform as the answer to users' becoming more and more demanding:

If hybrid, HTML 5 and/or mobile web apps used to be enough to “satisfy” their needs, while being a “blessing” for developers' budgets, as well, mobile users started to crave native-like performance. And so, React Native emerged!

It's a convenient “bridge” between JS and native platforms:
 

  • React Native apps get written in JavaScript
  • they “play by the rules” and meet the standards of the operating system
  • ... while accessing a big part of the native platforms via this metaphoric “bridge” that React Native creates
     

PhoneGap: Tempting Benefits vs Discouraging Disadvantages

Now in order to get an accurate score to our “PhoneGap vs React Native” debate here, we'd better go “pros and cons harvesting”, right?

So, without any further ado, I'll list some of PhoneGap's “irresistible” advantages first:
 

  • it “spoils” the developer with a wide range of frameworks/libraries to choose from; if you're a big fan of web technologies, if you enjoy building UIs in HTML and CSS, you'll love the rich collection of choices that PhoneGaps puts at your disposal
  • therefore, PhoneGap is easy to work with and developer-friendly
  • it's not bound to any specific framework 
  • PhoneGap-based apps perform within wrappers targeted to each platform and use API bindings that comply with the all the given standards for accessing each mobile device's data, network status, sensors
  • it's based on the “write once run on every platform” philosophy: you get to “reap” the benefits of cross-platform development; just “work your magic” in any of the web technologies that you're comfortable with and have your app running on all available platforms
  • … with no need to get yourself tangled up in each platform's native development language
  • your app will have a similar UI on all native platforms 
     

And now, the limitations that you need to consider when building mobile apps using PhoneGap:
 

  • by far the biggest inconvenience is the sluggish performance (leading to poor user experience, needless to add); and it's a more than predictable drawback considering that the web was created for web pages, not for heavy, animations-loaded, complex apps
  • you risk to get all the issues of the web, as well, right out-of-the-box, along with your PhoneGap hybrid app. Bugs specific to certain browsers or styles that work differently depending on the browser here included! 
     

In short: on one hand, you get to enjoy a great developer experience, on the other hand, you risk to compromise the user's experience!
 

React Native: Top Pros and Cons

In a PhoneGap vs React Native “competition” the former would always fall behind when it comes to performance: React Native is undoubtedly faster.

And here are some other benefits to "reap" for using React Native to build your mobile app:
 

  • it renders real native components instead of a webview
  • also, since it renders NATIVE views without using webview as an intermediary, expect to face no browser compatibility challenges
  • there's strong social proof, highly relevant evidence for its reliability: Instagram, Airbnb, Uber
  • it's committed to the “learn once, write everywhere” philosophy; once you're familiar with React, you'll be writing native apps in no time, with no need to delve into Java or Objective-C coding, unless you want to extend your app's functionality
  • moreover, React's backed by a huge community, so during your learning time and then during your app development process, you can rely on plenty of “expert” support 
  • the user experience is significantly improved: a React Native app will always have a native look and feel to it compared to a mobile web app 
  • also, since it renders native views, expect smoother, high performant animations, as well
     

Yet, React Native does come with some drawbacks, as well, that might discourage some (even you!):
 

  • you need to be familiar with React, there's way around it
  • you'll need to write an app for every native platform (due to that above-mentioned JS-native platform based structure) since some of the components might be platform-specific
  • don't expect to be able to use HTML: it's native components that you'll need to "juggle with"


And The Answer to “Your PhoneGap vs React Native” Dilemma” Is...

“It depends!”

If you've already used React for the web, so you're definitely not stepping on alien ground, go with React Native!

It would be a pity not to leverage your React knowledge and not to benefit from all the top performance that you get to inject into your mobile app!

Not familiar with React? And, moreover, you love having an entire “palette” of familiar web technologies at hand, to just “grab and use”?

Then you'll love PhoneGap's “developer friendly” approach!

The END! Hope I've included all the most relevant pros and cons and managed to pull off some good explanations on why some developers get seduced by Facebook' baby, React Native, while others prefer to tap into familiar PhoneGap's own advantages.

How about you? Where do you stand now? 

Feb 28 2018
CSS
Feb 28

Automate all site-building tasks and streamline your theme development process! In short: reduce development time and boost your productivity as a Drupal 8 themer with Gulp! But how to use Gulp to automate your workflow?

How do you set it up and run its toolchain in conjunction with Drupal? How do you move away from the old practices of the “good old days”,  when you had to write your themes in pure CSS?

Since you had no alternative...

How do you “harness Gulp's power” to automate tasks that are crucial for your Drupal 8 theming process such as:
 

  • compiling SASS and LESS
  • watching/generating CSS files from SASS
  • testing
  • generating static design pattern pages
  • reloading the browser 
  • optimizing assets: images, JavaScript, CSS
     

Well, keep reading and “thou shalt find out”!
 

But What Is Gulp, After All?

I confess I couldn't come up with a better definition for Gulp, than the one on the official site:

"… a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something."

More often than not referred to as “build tools”, Gulp is a front-end automation tool aimed at streamlining your theme development process.

Basically, it enables you to have all those tasks that are critical (and time-consuming) for your workflow run... automatically!

And thus to give your productivity as a Drupal themer a significant boost!
 

Why Use Gulp over Other Theme Development Streamlining Tools?

Here are 3 of the strongest reasons why:
 

  1. because Gulp configurations are conventionality simpler, shorter
  2. because using Gulp you get to capitalize on a wider community support
  3. because it runs faster, as well
     

How to Install Gulp

A word of caution: since Gulp is a node module, make sure you install Node.js (this, of course, if you haven't installed it already) first things first.

Needless to add that:
 

  1. you should go for the latest version of Node.js
  2. the installation process depends (and may differ) greatly on the Operation System that you're using
     

Install Homebrew, then run the following command:

$ brew install node

Now, for installing Gulp, type the following command:

npm install gulp-cli -g

Where “npm” stands for the “Node Package Manager” used for installing Gulp on your PC. And where the “-g” flag signals that Gulp should be installed globally on your PC.
 

Creating Your Gulp Project: Set Up Your Package.json File

As you well know, Node.js uses “npm”, a package manager “in charge” with downloading and installing all the modules required for a given project.

And all these modules get defined in a “package.json” file. 

So, this is the step you, too, should take now: setting up your package.json file in the very root of your Drupal 8 installation.

For this, just run the following command inside that directory:

npm init

It's inside this newly created package that all the key information about the node packages required for your specific project gets stored!

Therefore, make sure to fill up all the needed information as you put together your package.json.

Note: still, you should also know that all the prompts are ideally intuitive and that even if you leave those fields blank, you can always come back later and change the default values.

Remember to set the entry point to “gulpfile.js” and, once you add the required information for your project, keep in mind to specify your git repository.

An Important Word of Caution!

Your “How to use Gulp to automate my theming tasks in Drupal 8?” question should be accompanied by: “How to prevent triggering a segmentation fault?”

One that you might involuntarily trigger once you run Drush. Since Drush will consider the node package's own .info file files as part of Drupal and since it doesn't recognize their format... trouble happens.

Here's how you avoid segmentation fault:

add a script to the package.json file, whose main role will be to remove all the .info files from the node_modules folder

And now, let's go back to our package.json setting up process!

One last piece of advice that I'd like to add: if you've run the “npm init” command for creating your package.json file, remember to identify the “scripts” section and to replace the following line:

"test": "echo \"Error: no test specified\" && exit 1"

… with this one:

"postinstall": "find node_modules/ -name '*.info' -type f -delete"

And one more thing: set up the following .npmrc file in your theme folder's root:

unsafe-perm = true

Here's how the “intro” of your package.jso file' structure will look like:

"name": "...",
  "version": "...",
  "description": "...",
  "main": "...",
  "author": "...",
  "private": true,
  "devDependencies": {
    "browser-sync": "...",
    "gulp": "...",

Once you have your package nicely set up, go ahead and install Gulp into your project by running this command:

npm install gulp --save-dev 

Note: you might be wondering why you need to install Gulp... again. The answer is simple: first, you installed Gulp globally and now you're installing it into your Drupal project!

In this respect, it's  “--save-dev” which will let your PC know that Gulp needs to be added as a dev dependency in your packgage.json. All Gulp files and dependencies associated with it will get downloaded and a “node_modules” folder will get created.
 

Set Up Your Gulpfile.js

You're not yet done with setting everything up! There's still one important step to take before you discover how to use Gulp to create and to automate your site building tasks: setting up the gulpfile.js!

For this, just:
 

  1. go to your custom theme directory
  2. manually create a gulpfile.js file by either using the cmd/terminal or just by right-clicking to create a new file
     

Note: keep in mind to change the config variable so that it should match your paths! Also, make sure that all your CSS gets stored in the same “CSS” directory in your theme (for example: sites/all/themes/my_theme/css/application.sass) 
 

How to Use Gulp to Create and Automate Key Tasks for Your Workflow

And finally, we've reached our “destination”! 

The very goal of this blog post after all: determining which site building tasks are crucial for my/your own workflow, creating them and then automating them all with Gulp!

Do you fancy automated:
 

  • Sass compiling into CSS?
  • cache clearing
  • “detection” of all the changes you will have applied to your .scss files?
  • page reloading?
     

And your “wishlist” might go on... 

Well, the answer to your “How to use Gulp to automatically run task “x” or “y”?” is simple:
 

Just run the gulp [task_name] “magic formula” in your terminal! 
 

Here are some examples: 
 

  • gulp.task('watch', function () which will watch for all the changes applied to your scss files and automatically recompile 
  • gulp.task('reload', ['clearcache'], function () which will clear cache, then automatically reload the page 
  • gulp.task('browser-sync', function() which will automatically run the BrowserSync server


In order to get the whole process started, simply type “gulp” in your terminal.

The END! Your turn now!

Time to use Gulp to its full potential and to automate all those key (and time-consuming) aspects of your theme development process in Drupal 8! 

Feb 24 2018
Feb 24

Simplify! This is the right way to go if you're “obsessing” over your productivity as an app developer. Declutter your toolbox and keep only the truly essential Android app development tools in there!  

But which are they?

What are the tools for developing Android applications that shouldn't miss from any developer's personal “arsenal”? 

The most effective ones when it comes to helping you:
 

  1. become (even) more efficient by improving your workflow and thus speeding up your development process
  2. develop higher-quality apps

And this is where this blog post here comes to “the rescue”! It's a selection of THE fundamental Android app development tools that you should keep at hand (take it as your productivity-boosting toolkit).

Ranging from:

  • IDEs
  • to emulators
  • to design tools
  • to game engines

… and geared at streamlining your debugging, your performance-checking, they make the best Android developer tools to rely on in 2018:

Stay vigilant and alert for detecting any memory leaks in your Android apps right on the spot! But mind this doesn't take too much of your valuable time!

Instead, rely on this powerful tool in your developer's toolbox for identifying them. It will take this time-consuming “burden” off your back and alert you any time it tracks down a memory issue threatening your app. 

Moreover, LeakCanary provides you with a full stack trace so you can have those memory leaks fixed right away, too.

You'll have a crush on this tool if:

  1. you're a beginner, struggling to get started with that innovative Android app idea of yours (and, hopefully, to turn it into the next big thing in terms of Android app development)
  2. you're planning to learn Java and Android SDK: it will practically enable you to follow your favourite tutorials with highlighted code and then to get them tested... in real-time, on the very same device!

In short: the irresistible advantage of AIDE and the very reason why it's got included in this selection of essential Android app development tools is that it runs on Android!

Just imagine it:

You get to develop your Android app on your device, nice and easy, then you get to test it... on that very same device! This is the true “superpower” that this development tool provides you with! 

Note: don't expect it to be free, for it isn't, nor to “spoil” you with a full load of features. 

The power that you'll unlock by including this tool in your smartphone application development process? It mirrors your real device on your PC.

And this does turn into a true power if you're one of those developers who hate building their apps on emulators, yet they crave the advantage of using one.

There's more! Vysor will even mirror your live app demos on projectors and big TV screens.

So, if you think that this functionality matches your own work style, that it streamlines your workflow and helps you create a better app with greater ease, go for it!

Debugging native Android apps will never be the same again!

That if you use this open-source platform wearing Facebook's signature here when you go “bugs hunting”. 

And not only that it makes your debugging work so much easier, but it's also geared at landing you a much needed helping hand with your:

  • inspecting the SQLite database
  • checking the View hierarchy
  • monitoring network operations

A debugging tool that shouldn't miss from your toolkit!

5. B4A, One of “Speed-Injecting” Android App Development Tools 

For “rapid development” is what you'll achieve by leveraging this tool's features.

And these are:

  • the ability to develop Android apps using the much simpler BASIC programming language 
  • a visual editor for manipulating your views to your liking
  • wireless debugging

In short, B4A (Basic for Android) makes such a convenient IDE and interpreter enabling you to create your app in a simpler procedural programming language.

Plus, it comes packed with other advanced features to speed up your development process (as above-mentioned).
 

The “Holy Grail” of all Android app development tools!

Officially it's the IDE for Android. 

But in reality, it's your own “Swiss knife” to use as an Android developer! Since it plays multiple roles crucial for your mobile app development workflow:

  1. it's a compiler that you get to leverage to create a file system for arranging your app project, to create multiple APK files
  2. it's an editor for the programming language that you'll decide to use in your app's development process (whether it's Java, Kotlin, C++...)
  3. it's an XML editor (providing you with a “design view”, as well, that will guide you in displaying your app's elements on the screen; crucial for keeping up with Google's Material design guidelines)
  4. it also includes the Android SDK itself (yet, the Java SDK needs to be downloaded separately)

In terms of pros and cons, do expect a steep learning curve for developing with Android SDK and Java. But once you've got through it, do expect to gain access to unlimited support, to a whole bundle of advanced features and to unmatched integration functionality.

From this standpoint, Android Studio is the “can't live without” tool-set for any developer! 

Does this scenario sound familiar to you?

You hit a dead end down your app development roadmap and you need to go over to Github or StackOverflow and have a quick look at some code examples!

Well, Codota enables you to do precisely that, but without having to leave your IDE.

Talking about speeding up your development process, right?
 

Far gone are the days when GenyMotion used to be “just” the developers' top choice whenever they wanted to create their apps using an Android emulator.

It has now grown into a complete platform whose powers you get to harness for:

  1. developing your app
  2. testing it
  3. deploying it

Do consider it as a “candidate” to be included in your own toolbox of Android app development tools essential in your work this year.

9. Visual Studio with Xamarin

These days you get Xamarin right out of the box with Visual Studio, Microsoft's IDE.

One supporting a whole wide set of languages: JavaScript, C#, VB.net, and others, too, via extensions.

And what's the “deal” with Xamarin? What makes it “essential” for your toolbox? 

  1. it enables you to develop cross-platform apps using C# (have you been “toying” with the thought of developing an app both for Android and iOS using the very same code?)
  2. … to test them on different devices that are connected to the cloud

A word of caution: accessing and working with Java libraries isn't really “a child's play”, do be prepared for that; also, you need to accept that you'll be losing some of Google's cool integrated features and support.

It makes any smartphone app developer's trump card making his work on Git as efficient as it can get!

Basically, this tool's aimed at making Git cleanly organized so you can visualize all your work there — commits, changes, branches — in the form of an easy-to-navigate-through structure. And all this without the need to use the command-line!

One that can only boost your productivity, as it helps you sweep through Git with great ease!

11. Fabric, One Those Powerful Android App Development Tools You Should Be Using

And its power lies in all the capabilities that it's been invested with. It provides you with a whole set of features designed to help you:

  1. develop
  2. deploy
  3. extend

… your Android apps' functionality fast and easily.
 

Once developers' very first choice when they started selecting the Android app development tools to build their toolboxes with.

This until it got “dethroned” by Android Studio!

And yet, Eclipse should still be part of your toolkit. It's an IDE that supports a wide range of programming languages after all (Java with the Android SDK here included).
 
Note: still, do not expect it to get you “spoiled” with out-of-the-box support, like Android Studio does, so be ready for some setting up work!

A tool that takes “bug hunting” to a new level!

Practically it empowers users to share video, audio recordings, screenshots, detailed logs whenever they detect anything suspicious in your app.

And these user-generated “signals” become priceless in your constant attempt to keep your app bugs-free!

If it's a cross-platform, feature-packed game app that you're planning to build, this game engine might turn out to be your best “ally”!

Here's why:

  1. it provides easy support for Android
  2. it's open source
  3. when it comes to graphics, it does have an advantage over its “rival”, Unity
     

Team up with Takt in your major lags and bugs detecting “adventure”! 

This library will help you check your app's FPS thoroughly and spot down bugs right in its development phase. 

For you don't want them to linger on in there once your app's being used in its production phase, now do you?

The END!

I know what you might think right now:

Each developer's toolbox depends solely on his/her preferences, goals and personal work style.

It's perfectly true and I've anticipated this “objection” myself. Therefore, I've grouped here only those truly essential Android app development tools that one should “carry” in his/her toolbox.

... irrespective of his work style and goals set for his/her app.

Feb 08 2018
Feb 08

Just imagine: all that masterfully coded back-end, all that hard work performed in the “backstage”, all those great features that you've created from scratch... turned into a worthless effort. And this because you haven't invested the same amount of time and effort in selecting your e-commerce site's theme, as well. So the question that arises now is: what are the free Drupal 8 Themes for eCommerce worth checking out?

So you can pick your perfectly suitable one, that would: meet, greet and retain your online visitors and spotlight your products.

Well, we've read your thoughts and done our research for you! We've dug deep into the “pile” of free Drupal 8 Themes designed specifically for online stores and put together a top 4.

And now, without further ado:
 

1. SShop, A Bootstrap-Based, Responsive Theme

Free Drupal 8 Themes for eCommerce: SShop

Let's get straight to the features that convinced us that yes, this is a theme that deserves its place in the top 4 Drupal 8 responsive themes for e-commerce sites:

  • it “spoils” you with out-of-the-box Drupal Commerce 
  • it's ideally quick & easy to install 
  • it provides you with a homepage slideshow (delivered by the Views Slideshow module, one of the many modules that the SShop theme supports)
  • you get a multi-level responsive header menu out-of-the-box, as well
  • it enables you to add as many fields as needed to your Default Product type 
  • and should I also add that you get Slider content types and a Blog out-of-the-box, too?


A whole “plethora” of built-in features offered to you “on a silver plate” for this theme not to get levelled up from just “another one of those free Drupal 8 eCommerce themes available on the web” to... one of those “definitely worth checking out”!
 

2. eStore, One of the Feature-Packed Free Drupal 8 Themes for eCommerce

Free Drupal 8 Themes for eCommerce: eStore

If it's a fully responsive, Bootstrap Drupal theme, conveniently “overloaded” with e-commerce site features, that you need, than eStore is the one!

Now allow me to dig deep into this out-of-the-box “load” and take out some of the key features and cool functionalities that you'll get:

  • a product layouts collection for you to scan through and select from
  • the option to add your own fields to the Default Product type
  • content types included in the configurations
  • an out-of-the-box Blog to integrate with your e-commerce website
  • Slider content types
     

And the list of features could go on. Do check it out before investing valuable time in looking through a whole load of Drupal 8 Themes based on Bootstrap available on the web!
 

Free Drupal 8 Ecommerce Themes: Commerce Bootstrap-Based Theme

That's right, this is one of those free Drupal 8 ecommerce themes —  a sub-theme of the Bootstrap theme — geared towards speeding up the whole theming process of your e-commerce store.

And how does it do that? It just overrides the Drupal Commerce templates so that they match both Bootstrap and all the other helpers. 

So, it's practically your “trump card” theme boosting the theming process by automatically handling all the matching —  Drupal Commerce vs Bootstrap —  for you.

Pretty convenient and definitely worth taking it out for a “drive test”, don't you think?
 

4. Belgrade: Fitted With Drupal Commerce in Mind

Free Drupal 8 Ecommerce Themes: Belgrade

Another Drupal theme suitable for your (future) Drupal 8 e-commerce site.

An out-of-the-box one, designed specifically for Drupal commerce and developed via the previously mentioned Drupal theme here: the Commerce Bootstrap base theme.

Built, from the ground-up, to meet any online store's specific functionality needs. Therefore, worth taking it for a spin, don't you agree?

END of the list! Can't hide that I'm more than curious how your own top free Drupal 8 ecommerce themes looks like. What other visually-appealing, feature-packed themes does it include? 

Jan 23 2018
Jan 23

Welcome to... Dockerland, a place of never-ending confusions! The most frustrating one of them all — for every novice planning to explore Docker — being the “Docker Image vs Container” dilemma.

“What, aren't they one and the same concept?”

But you know that this is a rhetorical question: you just sense that they're 2 distinct concepts...

Yet, you can't really identify the differences:

How are Docker containers and images different after all?

Now let's clear up the Docker Image vs Container confusion once and for all:

First Things First: What's a Docker Image?

A file (or file-like... thing) that gets built from a Dockerfile, by running a "build" command. 

Moreover — and this is particularly important in defining a Docker image and setting it apart from containers — it's an inert, immutable type of file. A template-like file (you could also imagine it as a snapshot of a container).

It's only when started, with the docker command, that a docker image starts producing a container.

And since images in Docker tend to grow quite large, they're built on a layered structure (multiple players of other images). This way, only a small “load” of data gets sent when loading images over the network.

Wrapping Up:
 

  1. you can take the docker image as an application that you'd like to run
  2. a docker image can't be “running” or be “started”; once the “docker run” command is... run (obviously!), the image grows into a docker container, so... mind the inevitable confusion
     

Which Leads Us to The Question: “What's a Docker Container Then?”

The not 100% accurate, yet generally accepted (even if halfheartedly) definition is: 

“A container is a running instance of an image”

Now, let me detail...

Practically, the very act of running a Docker image produces a Docker container. You won't find a more straightforward explanation than this one!

And containers are (or they should be) the very reason why “learning Docker” turned into one of your top resolutions for 2018 in the first place. For they're:
 

  • lightweight
  • using fewer resources
  • portable
  • easy-to-be-deployed
     

… ways of running and managing your applications.

If you're fond of analogies, here's one that will undoubtedly help you come up with a clear answer to your “Docker container vs image” dilemma:

If a Docker image was a class, then a Docker container would be an instance of a class (a runtime object). 

Wrapping up now:
 

  1. once you start an image in Docker (so once you use the “docker run” command) you basically have a running container of this image in question
     
  2. a container is created by adding a top writable layer to a Docker image and thus by initializing multiple settings (container name, ID, network ports etc.)
     
  3. and it's due to that very writable layer, storing all the changes applied, that you can have multiple containers running off the same image; each and every one of them preserving its own distinct data state
     

Docker Image vs Container: Key Difference Revealed

The most significant difference clearing up the confusion is the following:

There is a top writable layer setting Docker images and Docker containers apart

It's that very layer, storing all write operation corresponding to the containers in question, which:
 

  1. gets deleted along once/if the container, itself, gets deleted, while the underlying image remains intact
     
  2. enables multiple containers to share the very same underlying image
     

Now to better explain the key differences founding this dichotomy, let's reduce everything to a simple, clear-enough (hopefully) formula:

a docker image + a docker run command = a docker container (meaning a running instance of the docker image)

… a container equipped with its own writable layer and which can get listed via a "docker ps" command

Is everything any clearer and simpler to you now?
 

Or Maybe a Metaphor Example Suits You Best?

In addition to my “class vs instance of a class” analogy, let me try now explaining this tricky Docker dichotomy by using a metaphor... or two:
 

  1. Let's say you have a film and a VHS of (which stands for our “image” in Docker). Then, imagine you'd place that VHS into your “virtual” VCR. In this case, the VCR stands for your Docker container. Better?
     
  2. Or you could see the Docker image as an executable file on a disk (an app's file); once you run your application, it promptly creates an instance running in its memory. Now that very instance is our metaphorical Docker container.
     

Have I managed to clear up your confusion or just... deepen it instead?
 

Docker Image vs Dockerfile: How Do You Set Them Apart in “Dockerland”?

Now, let me rewind to the stage where we can't even be talking about containers (not just yet). Where not even Docker images are yet built: the Dockerfile stage.

You can take a Dockerfile as a... recipe for creating Docker images.

And here's how the “cooking of an image” takes place:
 

  1. a Docker command is run in that Dockerfile
  2. and so an image gets built
     

Clear as daylight: a Dockerfile is a... file that you create which, in return, creates a Docker image when you run a separate build command.
 

The END! Do be honest now: have I managed to clear up your “Docker Image vs Container” confusion?

If so, then “solving the puzzle” around this dichotomy will make a huge jump start on your Docker learning plan for 2018. Happy learning!            

Jan 12 2018
Jan 12

Native Apps: They're Not Going Anywhere... Not Anytime Soon

In other words, in the "progressive web apps vs native apps" competition PWAs make an alternative, not a replacement for native apps.

For native apps are here to stay and still offer plenty of advantages themselves, too, (while progressive web apps do have their own limitations to consider, as well) for companies and developers not to give them up anytime soon.

And here are just some of the key reasons why they continue to steal the spotlight. Reasons that might help you find your own answer to the “PWA or native app?” question:
 

  1. big brands, already having their own native apps running on their preferred platforms, don't feel the same pressure as low-budgeted companies to switch to PWAs; it's some sort of “inertia-driven stubbornness”
     
  2. app developers with a wide experience with IOS or Android don't feel like replacing their familiar work routines with a PWA-specific one, even if the latter is less complex
     
  3. let's admit it: the web-based app development does come with its own limitations that still need to be addressed 
     

Progressive Web Apps vs Native Apps: 6 Reasons to Go With a Native App

As PWAs exploit some of the native apps' drawbacks, so do the latter turn some of their “rivals'” limitations into their own strong points.

For instance:
 

  • PWAS might be widely adopted thanks to their universal compatibility, hassle-free user experience and short development time, yet they're not capable to interact with the devices that they run on
     
  • native apps can do that; moreover, they're perfectly adapted to leverage a mobile device's smart functionalities
     
  • also, PWAs run in web browsers, which, might turn into a disadvantage: it could slow them down 
     
  • … whereas native apps, being installed on the given devices, first things first, will inevitably load a lot faster; there's no longer a browser intermediating the process 
     

Now, let's dig out other strong reasons for... going native:
 

1. No Ifs and Buts: They're Faster

As previously mentioned: with the web browser acting as an intermediary, progressive web apps can't compete with their native “rivals” in terms of performance.

As opposed to PWAs, native apps are installed on the devices that they run on.

Therefore, not only that their code practically “lives” there, but it's platform-bound. Written with the requirements of that specific mobile operating system in mind.
 

2. They Come With Built-In NFC Support 

The “Near Field Communication” support is vital for certain businesses. So, do consider this native apps' advantage (or this PWAS' shortcoming, depending on how you want to put it) before you give a final answer to your “progressive web apps vs native apps” dilemma.

If it's of critical importance for you that your customers should be able to pay for your services with their phones, then you need to go native. There's no way around this!

PWAS can't yet interact with the NFC chip enabling this type of payment.
 

3. They Provide a Quality Control Guarantee 

All the app stores' “bureaucracy” might be discouraging enough, yet there are good intentions — resulting in a quality guarantee —  behind all those steps to take:

filling out forms, reading specific forums, following strict app development guidelines, waiting for your app's review process to be carried out etc., etc.

Instead of seeing them strictly as... highly restrictive, take them as multiple filters that clear your app of any malicious code.

As for PWAS, just think about it:

The easier it is for anyone to access your app by just visiting the web page hosting it, the easier it is for a hacker, as well, to exploit the vulnerabilities of that connection.
 

4. GEO-fencing: A Superpower Placed in Your Hands

And this is no exaggeration, especially if it's a retail app that you're planning to develop.

Just give it a moment of thought:

GEO-fencing will enable you (your marketing team) to define virtual “boundaries” in the real world; once a customer's mobile device enters or exits that defined area, a push notification gets triggered.

A powerful functionality to ponder on when you're facing a “progressive web apps vs native apps” decision-making challenge. A smart functionality that native apps can easily exploit, while PWAs can't.
 

5. They Can Leverage a Device's “Smart” Capabilities

And this is one of the major advantages of native apps over progressive web apps!

They interact with the mobile devices that they're installed on, meaning that they use their smart features to their full potential. Features such as:
 

  • proximity sensor
  • wave lock: you don't want your users' phone screens to go black right in the middle of a video you've inserted in your app, now do you?
  • ambient light
     

6. They Easily Interact With Other Apps

Take for instance this highly frequent scenario:

A user tries to set up his/her account within your app and he's given the option to enter his Facebook login details

It's the perfect example of native apps interacting with one another. And this is but just one example of inter-app communication that helps users save valuable time.
 

So, What Kind of App Should You Develop After All?

“ The one that best serves your needs.”

So, get them clearly defined first things first:
 

  1. Do you need to develop a basic customer service/retail app? And, moreover, you're both budget and time-limited, as well? Then a progressive web app might just be the perfect fit for your project's needs. 
     
  2. Is it a mobile app exploiting smartphones' advanced functionalities to the fullest that you need to build? Then you should consider opting for a native app: it's fast —  which will definitely impact the overall user experience — it integrates with multiple payment gateways and it harnesses the power of “smart” features (Geo-fencing, NFS, wave lock etc.)
     

Also, when trying to pick your winner in the “progressive web apps vs native apps” contest, consider the expected future advancements, as well:
 

  1. mobile devices will get injected with more and more advanced technologies, tilting the balance in native apps' favor 
     
  2. progressive web apps will continue to be constantly supercharged with new and new functionalities, that go beyond a web browser's standard ones (integration with Bluetooth, with NFC, with smart devices' hardware features)
     

That being said: the choice is yours to make! I've only pointed out the main criteria and the key benefits/limitations for you to weigh and to compare, so you can make a fully informed decision.

Jan 12 2018
Jan 12

The paradox of choice, right? Didn't it use to be so much easier back in the old days, when you had just one option at hand? "You wanted to go mobile, you just knew this meant “pumping” money into a native app." Clear as a day! But what do you now, when you're facing a "progressive web apps vs native apps" situation?

Which app development approach is the perfect fit for you? For the nature of your business and for your app project's specific needs?

PWAS seem to be “stealing the show” these days: first they intrigue, next they “seduce” with the hard-to-resist-to promise that they deliver:

Empowering small businesses to compete against the "giants" in the mobile app development arena!

And still: native apps won't be going anywhere anytime soon!

Moreover, they'll get even more robust and faster, as the devices that they run on get more and more advanced. And as they'll continue to leverage their great advantage over progressive web apps

Leveraging mobile devices' smart features and capabilities and thus delivering an enriched user experience.

Now, to put an end to your “turmoil”, I've come up with a sort of “inventory” listing the set of benefits that you can reap from choosing one type of app over the other.

Here it goes:
 

But First: What's a PWA? And How Is It Different from a Native App?

“An app running inside the user's web browser, that he/she doesn't need to download and install beforehand. And which, moreover, is injected with native app-like functionalities and wrapped in a seamless user interface.”

This should be a clarifying enough answer to your “What's a PWA?” question.

Bottom line, the key difference between PWAs and native apps is:

The first ones run inside web browsers, while the latter run on the mobile devices that they're installed on.

The concept behind this revolutionary approach to app development is both daring and ambitious:

Cutting down the overhead and the discouraging complexities usually associated with a native app's development process.

And thus:
 

  1. reducing time and costs
  2. eliminating the step where your users download it from an app store 
     

Progressive Web Apps vs Native Apps: Top 7 Benefits From Choosing a PWA

For it all comes down to benefits, right? What's in it for you if you choose one app development approach over the other?

The level popularity that one type of app has gained falls shortly behind the very set of benefits that you get.

Now here are the most valuable ones to consider when you're having a “PWA vs native app” dilemma:
 

1. You'll Reach Out to A Significantly Wider Audience, With Fewer Resources

As compared to developing an Android-focused or an IOS-focused native app, a PWA will practically grant you access to all platforms. It's a “develop once, run everywhere”, type of situation:

A PWA is a “platform-agnostic” type of app.

Needless to add that your progressive web app's extreme versatility will help you reach the widest audience way quicker and with minimal costs.
 

2. You'll Reduce The App Development Cycle Times 

And this is, undoubtedly, that heavy-weighting advantage tilting the “progressive web apps vs native apps” balance in PWAs' favor. The very reason why progressive web apps gained so much attention in the first place.

With native apps' development process “famous” for:
 

  1. all the headaches it causes
  2. all the complexities specific to any platform-bound solution
  3. all the time-consuming steps to take: crafting some eye-catching screenshots, writing down the description, identifying the right keywords and strategically sprinkle them across the description...
     

... PWAs emerged in a highly favorable context and they “exploited” precisely the overhead associated with a native app development cycle.

So, they managed to “lure” developers unsurprisingly easily by:
 

  1. eliminating most of those complexities from the app development process
  2. eliminating the need to build multiple platform-bound versions of the same app
     

Also, it goes without saying that reduced development times translate into reduced costs.
 

3. It's a Unified User Experience That Your App Will Deliver 

The advantage of being platform-agnostic bubbles up to the user experience itself.

Having a unique version of your PWA running on all platforms, accessible to all customers, it'll be easier for you to deliver the same user experience to your entire user-base.
 

4. A Hassle-Free User Experience Requiring the Minimum of Effort

Compare the 2 following scenarios:

a. a hypothetical user visits a certain app store, chooses an app, waits for it to download and then goes through all the steps required for installing it on his/her mobile device

b. a hypothetical user lands on a website and gets to use the app right there, almost instantly, with no prior installation; moreover, if he/she wishes, he can save the link as an icon on his device's home screen

Isn't it obvious why, in a "progressive web apps vs native apps" competition, the advantage of easy access will always outweigh most of the native apps' benefits?

In a few words: 
 

  1. you, as the app owner, get to deliver the content you wish to deliver with utmost ease
  2. while your users access it using the fewest numbers of steps
  3. … and high accessibility translates into a higher level of user engagement
     

A win-win situation!
 

5. Users No Longer Need to Install The Latest Updates Themselves

A major convenience both for you and for your apps' users:
 

  • you'll get to easily keep them up to date with all the changes that you might apply to your services
  • with no updates to run and no need to re-download the app, users always get the latest version of your app, upgraded with the most recent functionality features that you will have added to
     

6. Extended Compatibility: All It Takes Is a Modern Web Browser

That's right since PWAs run on HTML 5 — the standard for web content — a modern web browser on his/her mobile device is all that a hypothetical user needs for accessing your app.

Talking about maximizing your app's reach, right?
 

7. You'll Cut Down Costs For Building and Marketing Your App

You can get a progressive web app up and running (and marketed) in no time! With considerably fewer resources of time and money to invest.

So, if:
 

  1. you're facing a limited budget
  2. you're in the retail or hospitality business
     

… the benefit of bringing your customer service app to your customers quickly and in a cost-effective way is just... priceless.
 

The END! Well, not the end on my post on the progressive web apps vs native apps “competition”, but the end of the list of reasons why you should consider going with a PWA instead of a native app.

Stay tuned, for in the second part of this post I'll be:
 

  • putting the spotlight on mobile native apps
  • revealing to you all the benefits that you can enjoy from choosing this type of app development approach
Jan 08 2018
Jan 08

Ready to set up your web app? One which, needless to add, should deliver your users a feature-rich front-end experience? Great! Now comes the truly challenging part: deciding which JavaScript UI component library — Vue.js vs React —  is right for your web project!

For its specific needs and requirements:
 

  • is it a small or a large scale one?
  • is it one overloaded with dynamic elements?
  • do you plan to go mobile, too?
  • do you want it built fast or do you want it capable to scale up in order to accommodate all future functionalities and features?
     

And the debate is nothing but:

convenient simplicity and lightness vs superpower backed up by a thriving community 

But let's not move away from your initial “dilemma”:

“In a Vue.js vs React competition, where I get to choose the most appropriate front-end framework that should power my future app, which one's the winner?”

Let's bring in the 2 contestants on the “stage” now, shall we?
 

But First: 2 Crucial Questions That You Should Be Asking Yourself Beforehand
 

1. Will it be a web or a native app?

And this is a critical question to be asking yourself way before you start your “investigations” on the 2 competing JavaScript UI component libraries.

Here's why:
 

  1. React has got you covered whether it's a web application (ReactJS), a native mobile app (React Native) or... even a virtual reality front-end app that you're planning to develop. And this is, no doubt, one of the most heavy-weighing answers to the question: “Why React over Vue?”
     
  2. Vue2.0 has made a big step forward, towards a native approach (and here I'm referring to Weex, of course); and even if it still can't get anywhere close to React Native's built-in support for building native mobile apps, it's still a “promise” for the future to come.
     

2. How Much Time Do You Have Till You Need to Actually Start Building It?

In other words: is it an “ASAP” type of app developing situation or you do have the “luxury” to invest as much time as needed in learning a new JS framework?

And this question is more than relevant (and helpful for narrowing your 2 choices down to 1 from the start) since:
 

  1. ReactJS can be discouraging for some, due to its quite steep learning curve; from its terminology to its heavy documentation, everything looks less familiar, less intuitive, more frustratingly complex
     
  2. Vue.js, on the other hand, has “seduced” lots of its current advocates precisely with its low learning curve: it “spoils" them with familiar CSS, HTML, ES6 and where do you add that it doesn't call for a Webpack either.
     

Basically, you get to explore and capitalize upon Vue.js's potential right away, in pretty much any code sharing environment.
 

Go With Vue.JS If...
 

1. It's simplicity in syntax that you value most in a web framework 

In a “Why moving from React to Vue?” debate, the argument of “extreme simplicity” would have to be the strongest one.

That's right, this JavaScript UI framework's simplicity is built deep into its design.

Moreover, the familiarity of the concepts that it uses (or better said “copies” from its main 2 “rivals: React's virtual DOM and Angular's two-way data binding) could be enough to help you find the answer to your “Vue.js vs React” personal debate.

You just run your Vue.js project right from your web browser!

And its simple syntax bubbles up to the easiness of altering the state data (not to mention that this also makes it significantly easier to pick it up). 
 

2. It's a small scale, ideally fast web app that you're planning to build

Since page size is a game changer (isn't it?) when it comes to building an app, Vue.js comes to tempt you with its surprisingly low weight (approx. 25.6KB once minified).

Now you do the math how this will impact the rendering system and, overall, how it will tilt the balance in any “Vue.js vs React speed” comparison.
 

3. You're more into a “templatey” way of building apps

And how could you “resist” a default template structure after all (and even so more if you're not new to AngularJS)? One that uses old-style HTML.

Basically, you get to drop your markup into an HTML file and thus:
 

  • use already familiar (aren't they) HTML attributes for injecting the needed functionality into your default template 
  • use pre-processors
  • clearly separate layout from functionality 
     

… as compared to building your app using ReactJS, which uses a whole different approach: it requires you to put together your own DOM using a JSX syntax.

Note:

  • yet, some might argue though that templating comes at a cost, that of learning the extended HTML syntax, as compared to the rendering functions. And, moreover, that React's JSX syntax puts superpowers in the hands of the developer, once he/she gets familiar with it. Since it enables him/her to use JavaScript in his template.

And yet: stay assured, Vue.js 2 now provides you with both a render functions and a templating option for setting up your web app!
 

Go With ReactJS If...
 

1. You Want to Easily Build an App That Should Work on Both Web and Mobile

Convenience at its best! This is how we might call Facebook's “protegee's” two-faceted nature:
 

  1. ReactJS for building your high-power, interactive web app's interface with
  2. React Native for building your next best thing in terms of native apps
     

No need for you to knee deep in learning the nitty-gritty of a whole new JavaScript UI component library.

Instead, you'll be using the already familiar React for carrying out both your plans (to build a web and a native app), “juggling” with web components and respectively with native components.
 

2. It's a Complex, Large Scale App Project That You Have in Mind

If that's the case, then the following argument might just be a decisive one in your Vue.js vs React “dilemma”.

For React is built with the specific needs of large-scale apps in mind! Which means that it's perfectly equipped for injecting them with high performance!

And it's precisely when you're dealing with an overly complex app project that you realize that:
 

  1. transparency and testability are crucial for you
  2. a template system is way too restrictive, far less configurable (although it would help you get a basic app up and running in no time)
     

In this respect, React's JavaScript-made templates grant you the freedom you need for:
 

  • reusing
  • easily testing
  • restructuring
     

… your conveniently decomposed code.

And this is the “superpower” that React lays in your hands: it allows you to “split” its JavaScript structure into multiple components, that you can easily test and reuse!

It “spoils” you with an ideally configurable rendering system.
 

3. It's a Huge Ecosystem and a Thriving Comunity that you value most 

React's indisputable “fame” — not to mention Facebook's backing — does come with its benefits. Advantages that you can capitalize upon:
 

  1. more resources out there for you to delve yourself in and to leverage in your app (tutorials, articles, Stack Overflow answers etc.)
  2. a wide range of add-ons and tools for you to select from and boost your project with
  3. the guarantee that you'll benefit from a continued maintenance (given by Facebook's patronage and, therefore, by the whole “army” of React developers that commit themselves to keeping it closely
     monitored)
     

And The Winner of This "Vue.js vs React" Dabate Is...

Have I made you even more confused? Is it even harder to state which front-end JavaScript framework would win the Vue.js vs React debate?

One's “seducing” you with a simple syntax and set up, the other one with its scaling capabilities.

One “boasts” with faster rendering if it's a small app that it's powering, while the other one empowers you to build both web and native mobile apps.

And where do you add that the two UI frameworks share a considerably large set of features, as well:
 

  • they're both conveniently lightweight
  • they're both open source
  • they both use virtual DOM and reactive components
  • they both rely on server-side rendering
  • … and are both component libraries providing you with a “backbone” in terms of functionality.
     

So you'll need to rely on third-party frameworks for handling any extra functionality (state management, routing etc.) that you're planning to equip your future app with.

Decisions, decisions...

Now here are a few conclusions deriving from my little presentation here that might help you decide a bit easier:
 

  1. opt for Vue.js if it's a new JavaScript framework that you'd like to drop into an already existing codebase
  2. choose the React library if you're planning to leverage web technologies to develop a native mobile app
  3. go with React if it's an SPA or a really complex, large-sized app that you're planning to build
     

So, is it any easier for you now to solve your Vue.js vs React dilemma?

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web