Modern Frontend Technology Stack- An Overview

As javascript is expediting at an aggressive rate.Every six month new framework come into existence and popularity and it has become very difficult for a front-end developer to keep himself updated on day to day basis.

Now,with new framework and features,everyone want to exhaust those library for better and user-friendly interfaces are in demand.When it comes to development of web app,so many conditions comes into picture.Customers are looking for interactive design and value of product.So,to deliver a seamless running webapp it has become more challenging for a frontend Developers.

In the era of smartphones, web developers are expected to develop UI/UX that is responsive and user-friendly. If the web applications frustrate users, then it is difficult to maintain the customer’s loyalty on your website. Website navigation is another part often neglected by developers. Intuitive navigation creates a better user experience for the website visitor.

Slow web applications are a failure and as a result, customers abscond your website, thus damaging your revenue as well as reputation. Some of the performance issues developers’ faces are Poorly written code, Un-Optimized Databases, Unmanaged Growth of data, Traffic spikes, Poor load distribution, Default configuration, Troublesome third party services, etc.

Security is something the web developers need to consider at every stage of SDLC (software development life cycle). There are many things to consider when it comes to web application security such as denial of service attacks, the safety of user data, database malfunctioning, unauthorized access to restricted parts of the website, etc.

Frameworks are boost performance, offer libraries of coding and extend capabilities, so developers need not do hand-coding web applications from the ground up. Frameworks offer features like models, APIs, snippets of code and other elements to develop dynamic web applications.

In the current scerinio when the market is flooded with so many frontend framework.It become hard to figure out which one will best fit the requirement of the product.So Engineer struggle to learn and implement the best way.Just for example Angular 2.x is much more better than angular 1.x .React native is popular among mobile app developments.Ionic…NativeScript and other else.So now the questions arises do the developers need to master one of them or all at a go .

My approach,I write modular code.I write an layer of code to use any framework.Suppose right now for an application i am using backbone .I have written wrappers over backbone as base components.My code interacts with base components.So What is the advantage ? In near future If i wish to replace my framework with angular 2.x / React Native .So i have to make changes in Base Wrapper and my whole application logic and code will remain the same.This is the need of current front-end stack.You can change the framework and use the underlying features with minimal efforts.

Advertisements

Configure UI Layer on apache2

What is Apache2 ?

Apache is the most popular web server on the internet.It is used to serve more than half of all active websites.So lets configure it for our local development.

Installing Apache2 or httpd on Ubuntu or Debian

Open Terminal and run the following commands
    $ sudo apt-get update
    $ sudo apt-get install apache2

Assuming your workspace is in /home/user/workspace/UI directory
    $ cd /var/www
    $ sudo ln -s /home/user/workspace/UI UI
The second command creates a symbolic link to your repository.

Now, we will configure our apache server to serve static contents so that 
we can run our code locally.

Configure Apache2

$ cd /etc/apache2/conf-available

Create a file fqdn.conf inside conf-available directory containing following text:
ServerName localhost

and then again create a symbolic link to fqdn.conf file
$   cd /etc/apache2/conf-enabled
$   sudo ln -s ../conf-available/fqdn.conf fqdn.conf

Add UI workspace files and ProxyPass settings to apache2 server 
Before that let us take a backup of our setting file 000-default.conf.
Backup file name is 000-default.conf.bak

$   cd /etc/apache2/sites-available
$   sudo cp 000-default.conf 000-default.conf.bak

Now modify file 000-default.conf as the following:

Change DocumentRoot to:
DocumentRoot /var/www/UI

Add the following lines towards the end of the file, just before closing </VirtualHost> tag

        ProxyRequests Off
        <Proxy *>
                Order deny,allow
                Allow from all
        </Proxy>

        ProxyPass /api http://IPAddress
        ProxyPassReverse / http://IPAddress

        <Location />
                Order allow,deny
                Allow from all
        </Location>     

After making above changes,
Enable proxy module and restart apache2 server.


    $   sudo a2enmod proxy
    $   sudo a2enmod proxy_http
    $   sudo service apache2 restart
Open up your favorite browser and type localhost
This is all about configuring UI on your local Machine for development.
The same UI can be configured and run on node server.