sifars-wordpress

Blog

  • 7 Best Examples of Web Apps (PWA)

    7 Best Examples of Web Apps (PWA)

    Reading Time: 5 minutes

    In the ever-evolving technological world, pandemic 2020 saw a thrive in internet traffic routing towards mobile. People were more inclined to shopping, counseling, and education digitally. Only the ones who had their established presence on the web were able to handle the quakes of the pandemic. Some adapted themselves to the flow while not compromising with the performance. Companies and brands gradually shifted to a new era of development called the Progressive Web Apps. The PWA’s are the advanced versions of the websites that perform with apps, like functionalities, with easy navigation and user experience.

    Why Progressive Web Apps ?

    A responsive web app clubbed with efficient functionalities for a rich user experience as an outcome is called Progressive web app. These PWA’s use HTML, CSS, and Javascript as a foundation to mesmerize their users with their lightweight and high speed.

    A simple explanation of PWA

    PWA’s are the mirror images of the websites that behave and appear as its lighter and faster version coupled with loads of features like Push notifications, Blue tooth connectivity, a Camera, and the list goes on.

    Why Progressive Web Apps in 2021?

    In the technological universe, Progressive web apps are a synonym for Performance. An app that needs to qualify as a Progressive web app must comply with frontend performance standards. Its basic capabilities include the following MAGIC

    Mobile friendly
    And Seo indexed
    GPS enabled
    Installable
    Connectivity for Offline mode

    Fact Check

    A PWA opened in any other browser, with a desktop shortcut acts like a web app on the desktop.

    7 Best examples of Web Apps (PWA) in 2021

    1.    Spotify

    Spotify emerged, as an industry music experience changer with its mesmerizing features. Spotify had a native app that was recently advanced and introduced to the world with a PWA version. PWA delivered faster results with interactive Ui that charmed its users. Also, Spotify offered a plethora of features in its free version that was capsulated to attract the users to update to the premium version.

    Goals achieved with PWA

    • Increase in its Monthly users up to 130%
    • More traction time
    • Increase in average listening hours.

    2. Pinterest

    Pinterest is the 6th most popular social networking site with 67 million users from India. Pinterest adopted the PWA for grabbing the international market and casting its shadow among the active users for new ideas and interests. Pinterest achieved its objective with improved performance, and user experience thereby, registering 176 million users to its platform

    Goals achieved with PWA

    • Increase in user interaction
    • Traction time on the website increased up to 30 %
    • An upward trend in user engagements and revenue to 40%

    3. Trivago

    Trivago, with its 120+ million active users for searching and comparing hotel prices, proved that a Progressive web app could bring good traffic and user engagement. Push notifications, offline functionality with add to home screen function helped Trivago deliver a perfect PWA with increased user interaction.

    Goals achieved with PWA

    • Increase in User Clicks to conversion up to 90 %
    • Increase in User engagement
    • 120% more traffic to offer pages

    4.  Twitter Lite

    Twitter introduced Twitter lite as a progressive web app that introduced some amazing features. The faster performance with higher user engagement ensured more user interaction and an increase in ad clickthroughs. There was an increase in user tweets that made them achieve their goal of attracting people with more engagement.

    Goals achieved with PWA

    • Increase in tweets through PWA up to 70 %
    • Decrease in Bounce rate
    • Increase in user engagement and traction

    5. ALIBABA

    Alibaba, with its Progressive web app, brought traditional sourcing online. The app focused on user-friendly functionalities and attractive web design, that specialized in e-commerce, retail, Internet, and technology. The PWA helped the traffic to significantly rise with an increase in user traction time on the web app. Also, there was an explosion in the conversion rate with attractive user design and fast functionality of the app.

    Goals achieved with PWA

    • Explosion in their conversion rate up to 80%
    • The increase in the number of active users by 30%.
    • The traction rate rose to 70%

    6. Flipkart

    Indian market saw a surge in online shopping with the pandemic. Online shopping websites like Flipkart, with its Progressive web app, made the user interaction process go smooth. Flipkart – the biggest Indian e-commerce store, promises rich user engagement and conversion. The PWA promises a great user experience with its high performance in low connectivity and offline modes too.

    Goals achieved with PWA

    • Increase in conversion rate to 60 %
    • Increase in time spent on the website
    • A rise in Re-engaging customers.

    7. OLX

    OLX is the fastest-growing network of trading platforms globally that applied PWA. Soon it became the World’s biggest free online classified for people to buy or sell an item from the array of products & services. Olx embraces the most amazing features of PWA’s that include add to the home screen, push notifications, offline mode, and background sync.

    Goals achieved with PWA

    • Increase in the User engagement to 200%
    • A growth in click-through rate to 150%
    • Decrease in bounce rate to 80 %

    And The List Goes On…

    PWA’s have proven their worth as they promise results that can be measured in significant numbers. The fast functionality with an increase in click-through rate is the main factor that makes PWA trending in 2021. The above-mentioned incomprehensive list of  7 Best examples of web apps (PWA) in 2021, is a list with the organizations achieving their growth objectives. Still, there is a huge list of PWA’s that have been ruling the market, for example, Facebook, Nasa, Instagram Lite, Uber, Forbes, Book My Show, BMW, Telegram, The Weather Channel, Google Maps …

    Do mention your favorite PWA in the comments below that has charmed you with its user functionality. We will surely add them in our next edit.

    How To Build Your Own Progressive Web App?

    Well, by now, you may be wondering if your eCommerce site needs to be transformed into a Progressive Web App. The potential capabilities and functionalities are worth emphasizing the fact that PWA’s are trending in 2021. It has touched all the major industries from small startups to e-commerce sites and everything that comes in between.

    If you have a business idea or want to transform the existing website or an advanced version, Sifars can surely help you achieve your goals. Looking for a quote or a rough estimate for the same, click here.

  • Angular Js and its Super Features

    Angular Js and its Super Features

    Reading Time: 5 minutes

    In the era of digital transformation, we all need to cope up with the change. The pandemic 2021 has proved to us that this change is necessary and inevitable too.

    We need to be habitual and adapt to using the Internet for almost everything. We need to establish a powerful and convincing web presence. This goal can be achieved by having your own web application or website. 

    What can we do from a website? Is it shopping, education, socializing, or attending professional webinars?

    Well, we are glad to say the answer is: All of the above!

    To achieve the virtual face of your shop/ business venture or a professional career, one needs a powerful backup framework. This is where a majority of web developers prefer to use Angular js for making mesmerizing web apps or providing great website experiences.

    Angular as a framework was introduced by Team Google in the year 2009. Thereafter with advancements, we have been witnessing various versions of Angular, each one of them having its own set of rich features.

     

    What is AngularJs and what are some of its features?

    What is Angular js - Sifars.com

    Angular is an open-source front-end network with a plethora of smart and latest features. It has a large fan base and the ardent web developers leverage its best functionalities to the maximum. Angular as a package module offers high-end animations, complex choreographic UI, and error-free coding with minimal coding.

    Here are the top features that make Angular stand out-


    1. Cross-Platform

    Flexibility and Dynamism is the name of the game. Angular provides you the liberty to develop some amazing function-rich PWA or Progressive Web Applications. PWA as the name depicts provides an app-like experience and is packed with all the latest modern web capabilities. In the nutshell, it is cross-platform in nature as it deploys an app from the desktop and at the same time ships your app to the App store. Angular as an amazing Front end framework has never failed to impress its users.


    1. High Speed & Optimum Performance

    The Angular framework provides the liberty to its followers for rendering the code into HTML & CSS and access to the first view of the Application on other platforms like Node JS, .NET, PHP, etc. Angular has user interface frameworks that enable high speed and optimum performance.

    Coming to another feature that makes it exceptional is its Loading time. Angular promises zero loading time and live up to it too. It efficiently splits the code automatically as per the user’s requirements.

    1. MVC Architecture

      Angular explained By Sifars, Angular development company

    Angular as a Foundation for its users offers MVC Architecture. MVC stands for Model-View-Controller. As the terms are self-explanatory, the application data is managed by Model and View manages the display function. The controller plays the role of intermediary amongst View and Model. Angular helps save a good chunk of loading time by splitting the application into MVC.


    1. Syncing through Two-Way Data Binding

    Two-way data binding implies that any changes in the model will automatically be addressed by the view Layer. The view layer plays a smart role by staying in sync with the Model. It perfectly displays the efficiency with two-way data binding efficiency.


    1. Minimal Code Framework

    Angular is one of the most efficient frameworks that has proved its importance and preference over others through its- Less coding Feature. It doesn’t require a separate coding structure or snippets for linking the MVC layers.


    1. Typescript

      Typescript And Angular js by Sifars

    Typescript is a better version of javascript offering a seamless and efficient user experience.

    It is preferred by developers as it has plenty of features to offer the world. Typescript makes it quite easy to populate the root file configuration automatically. Further, it has improved Interface, generics, access modifiers for developers to exhibit their creativity on a platform.


    1. Virtual Scrolling

    Angular provides a virtual scrolling feature that helps the code to scroll various events. It seamlessly provides an efficient way for the simulation of items. Moreover, it supplements the loading and unloading of Visible DOM elements.


    1. Title Case Feature

    Amongst many features of Angular, the Pipe title  Case Feature helped change the First letter of each word in the sentence to Uppercase.

    <div>

    <h2>{{ ‘Angular 4 version is my favourite’ | titlecase }}</h2>

    </div>

    The above line of code generates the following output – Angular 4 Version Is My Favourite.


    1. Time Logging through Diary.js

    Logging in time and tracking thereafter helps bring about efficiency. Angular provided the Feature of diary.js that helped to log time and tracking thereafter. It helps developers to take a closer look into the time actually utilized.


    1. Controls in Screen Activator

    Angular enables the web developers to make the best use of Flexibility and enables Control. a dedicated set of commands help in maintaining control over the navigation. Here are a few examples of the commands or Callbacks

    •       canActivate    : to  allow or prevent navigation to the new control
    •       activate           : to allow successful navigation
    •       canDeactivate : to prevent or allow navigation away from the old controller
    •       deactivate       : to respond to successful navigation away from the old controller.

    1. Angular CLI (Command Line Interface)

    Angular has made its distinct position as a front-end framework as it offers strikingly the best features like SCSS support. It is also known as routing.  Packed with the best of features Angular, offers like ng-new or ng-add build-in features that provide ease and flow of operations. The basic Command Line Interface that rules the Angular module is

    •       ng New         : It helps create a new workplace and also used as a primary initial for all Angular apps
    •       ng Generate : As the name suggests ng Generate helps create services, routes, pipes and components                                                        and simple Test shells too.
    •       ng Server     : ng Server helps Testing the Angular App more readily on a local server.
    •       ng Test         : This command helps with making a cleaner version of code through end-to-end testing.
    •       Ng lint         : ng lint enables analyzing the code for all the errors and report them for efficiency.

    1. Directives

    Angular gives the freedom of creativity and uniqueness to developer’s work with Directives. Directives enable the developers to create custom HTML Tags and exploit them further to have access to behavior-driven elements. The easy manipulation of Dom attributes can be smoothly handled by Directives.


    1. Component Development Kit( CDK )

    Angular has never failed to amaze its developers with its amazing new set of features. The new upgrade has a Component Development Kit (CDK). It is CDK that makes Virtual scrolling and Refreshing go smoothly in Angular. Further, it also helps in Loading and Unloading the DOM that facilitates High performance.


    1. Drag Drop Module

    Angular helps to easily import the Scrolling Module or DragDrop Module. It helps In free Dragging, access to previews and placeholders. Another best feature it offers is the move item in Array and transfer array Item that make it create high-performance data lists.

    moveItemInArray- is used for reordering the list

    transferArrayItem- is used for transferring items between the lists

    Conclusion

    Angular is a super framework that has beautiful features to exhibit its importance. It provides zero loading time with promising efficiency. Forbes, BMW Find a Dealer, BMW Driveaway Price Calculator, and many other big Giants have their web presence in Angular js framework only. Angular is easy, efficient, and provides low code features. So if in doubt, choose Angular. 

    Sifars, a leading Angular Development Company, with its creative and experienced team, strives to provide its clients a modern, user-friendly website with its expertise. Further, we ensure the website to be robust, agile, and scalable to cater to a larger audience.

     

  • Best way to handle background processes in linux

    Best way to handle background processes in linux

    Reading Time: < 1 minute

    Every programmer soon comes to a point where he requires to setup several jobs to run in the background with 100% uptime. For example a website server, email server, job schedulers etc.

    These processes are more like a daemon process. And as like any other job, these tend to stop due to mishandling or uncatchable exceptions/errors. Rather to put a person to sit and constantly monitor the jobs, we make use of the Supervisor.

    A Supervisor is a process control system that will start, stop and monitor all our processes and will restart any, that fails.

    To install Supervisor on Ubuntu:

    sudo apt-get install supervisor

    Configuring Supervisor

    Let say we have a command that should run indefinitely:

    python run_this_command

    Supervisor configuration files are stored in the /etc/supervisor/conf.d directory. Let’s create a new configuration file as monitor-my-process.conf.

    Inside monitor-my-process.conf write:

    [program:my-worker]
    process_name=%(program_name)s_%(process_num)02d
    command=python run_this_command
    autostart=true
    autorestart=true
    user=linux_user
    numprocs=8
    redirect_stderr=true
    stdout_logfile=/home/linux_user/app.com/worker.log

    In this example, the numprocs directive will instruct Supervisor to run 8 processes of my command and monitor all of them, automatically restarting them if they fail. Also change the ‘linux_user’ to the user you want the process to be run as.

    Starting Supervisor

    Once the configuration file has been created, you may update the Supervisor configuration and start the processes using the following commands:

    sudo supervisorctl reread
    sudo supervisorctl update
    sudo supervisorctl start my-worker:*

    Cheers! Your processes will run indefinitely with auto restart.

    Bonus!

    Few more commands that are likely to be used sometime later:

    Stop all supervisor workers:

    sudo supervisorctl stop my-worker:*

    Restart all supervisor workers:

    sudo supervisorctl restart my-worker:*

    Get the current status of workers:

    sudo supervisorctl status my-worker:*

  • Vuejs: Constants from back end API

    Vuejs: Constants from back end API

    Reading Time: 2 minutes

    Hardcoded values make a developer’s job hectic if these are repeated at several places in the codebase. That is why constants are an indispensable part of an application. It’s easy and intuitive to keep your application constants in a separate file and import them in other files to use.

    Vue Js Constants
    import constants from 'path_to_file/constants.js'

    But what when your constants reside on the backend and you need to get them by making an ajax request to the server. how would you make sure that these constants are available before any of your components get rendered? Should we write the received constants object into a file and then export it. It doesn’t sound like a real solution. Of course, it is not.

    Object Prototype

    So let’s approach it with a real-world solution. First, we need to understand function constructor and its prototype. In javascript, each object created using a function constructor has access to its prototype.

    /** 
 * A function to create other objects. We captialize its name to distinguish 
 * it from other normal functions.
 */
function Person(firstname) {
  this.firstname = firstname;
}


// Add a property to its prototype
Person.prototype.printFirstName = function() {
  console.log(this.firstname);
}

// Create two different objects using the function as constructor
let person1 = new Person('Munish')
let person2 = new Person('John')

    Since person1 and person2 are created using a function constructor so it has access to the printFirstName method.

    person1.printFirstName()   // Munish
person2.printFirstName() // John

    Vue Instance Prototype

    We will use the same concept by fetching our constants object from backend and then putting it into Vue prototype. So that each component in our application has access to this property.

    axios.get('http://SERVER_ADDRESS/getConstants')
.then(function(res) {

  Vue.prototype.$constants = res.body.data;
  // Initialize the main instance once you receive the constants from backend
  new Vue({
    el: '#app'
  })

});

    Now you can access this constant object in any of your Vue components using the following syntax

    this.$constants.someConstant

    Note:

    Make sure your getConstants API doesn’t do any heavy lifting other than returning your constants. Because the front end application will not get bootstrapped until it responds back.