Posts about Framework and Libraries

Step-by-Step Guide to Create Progressively Decoupled App with React in Drupal 8

Posted by Pradeep Kumar Jha on Jan 7, 2020 10:56:08 AM

We’ve already discussed in our blog how decoupling Drupal helps you achieve greater flexibility, to deliver data anywhere and everywhere to the user at a lightning fast speed, ensuring exceptional web experience.

Let’s dig deeper into the technical details of how progressively decoupled apps can be created using React on a Drupal 8 website.

Why Opt For This Approach

With the increasing popularity of ReactJS, JavaScript libraries and frameworks prove to be useful in building complex applications by seamlessly getting embedded on a Drupal site, thus combining the robustness of an API-first CMS with slick and quick React frontend to collectively give way to amazing digital experiences along with future-proof builds. 

How To Create Progressively Decoupled App With React on Drupal

Step 1: Create React Environment

In our last blog on React, we learned how to set up Setup React App From Square One Without Using Create-React-App  Once the environment is set up, we shall move forward to creating a React app.

Step 2: Create React Application

Before looking into the process of creating a React application, let’s get a hold of the below terms:

  • Components - It's the building block of any react app. Basically, there are two types of components:  Functional and Class (From 16+ react version, this component is deprecated. Only functional components are used.)
  • Props - Arguments passed in react components to send data to components. 
  • States - Behaves like a data store to components. It’s mostly to update components when user performs some operation like clicking buttons, typing some text etc.

Now, let's write our first code block of React by using ES6 classes to create a React component called App.

class App extends React.Component {
//...
}

Now we'll add the render() method to render DOM nodes.

index.html
class App extends React.Component {
render() {
return (
//...
);
}
}

In return, we’ll insert a simple HTML element. 

class App extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}

Finally, we're going to use the React DOM render() method to render the App class we created into the root div in our HTML.

ReactDOM.render(<App />, document.getElementById('root'))

Here is the full code for our index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Hello React!</title>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
<div id="root"></div>

<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}

ReactDOM.render(<App />, document.getElementById('root'))
</script>
</body>
</html>

Now if you view your index.html in the browser, you'll see the H1 tag we created rendered to the DOM.

hello world screenshot

Hello World screenshot

Step 3: Visualizing the React component in Storybook

Storybook is a user interface development environment and playground for UI components. 

Visualizing the React component in Storybook

The tool allows testing the components independently and interactively in an isolated development environment. Story file code looks like:

Story file code

After running `npm run storybook` command, storybook will open on localhost server as shown in the attached screenshot.

storybook screenshot

 

Step 4: Creating Custom Block API in Drupal 8 and Embedding React application 

On running npm run build command on React application, it creates this react minified JS file:

/drupal_root/module/custom/react_block/react_block.libraries.yml

jsfile

The minified js file searches for the markup in the /drupal_root/module/custom/react_block/src/Plugin/Block/ReactApp.php file

and on finding the div ID, it renders itself at that point.

file getting rendered

And this is how the React block renders itself on our Drupal 8 website and makes the website a progressively decoupled app..

For one of our clients, we implemented this solution to create a budget planner and currency calculator for a giant travel retail outlet and helped boost the sales just after 3 months of its deployment. 

Srijan can help you leverage the power of React with API-first Drupal to create robust content workflows and hence lead to joyful editorial experiences for your business to evolve. Get in touch with our experts or leave your queries in the comment section below and let’s get the conversation started.

Topics: Drupal, Planet Drupal, Framework and Libraries

Do away with Security Risk Through AppSec Shift-Left Approach

Posted by Rahul Kumar on Nov 5, 2019 10:45:58 PM

With developers under the constant pressure of completing the software development process expeditiously, more and more facets of the process are compelled to make a “shift-left”, and bob up in the software development lifecycle (SDLC).

Given this circumstance, security can no longer be taken as a casual job especially when the code is being updated and delivered every few seconds and minutes.

That is where this “AppSec Shift-Left” movement comes into the spotlight. A strategy to audit code by discovering and eliminating software vulnerabilities without hampering the development process.

This blog will elucidate the need for AppSec shift-left approach and the application security tools that can be leveraged to patch the same issues.

The Need of Shift-Left Approach

The idea behind using the shift-left approach is to find vulnerabilities at an early stage in the SDLC in a fast and efficient manner. The earlier the development teams find bugs, the lesser is the rework they’ll have to do later. This is the reason why enterprises are setting up their developers responsible for application security. 

As a result, developers will have to embed this approach asap as a part of their responsibility to keep security in check and deliver the applications on time, and in case errors occur, they can fix in on time and not throw it over the fence to let someone else take care of it.

How Application Security Tools Can Support Developers 

7 Hexagons closely placed with text insideGenerally, developers have the common goal of producing secure, functional code within a deadline. To ensure security and functionality, they typically perform a code review process to debug their code.

Debugging code is not among the hopes and dreams of most of the developers. Plus, lengthy debugging sessions can delay the projects. So the ideal application security tools should help developers debug their code swiftly to boost their productivity and help them meet their deadlines. 

All these accomplishments will encourage developers to use the tool to remove software vulnerabilities. 

Additionally, whenever developers embrace these app security tools as a means to enhance their productivity, these tools are far more likely to showcase a material impact on vulnerability remediation.

Simply put, these application security tools reduce the amount of time they take for developers to debug their code. However, this is no easy task! To help developers produce secure, functional software on-time, these solutions must:

  1. Integrate into daily developer workflows. They shouldn’t interrupt development processes geared towards complying with the next deadline.
  2. Produce accurate and actionable results. Going forward, developers can fix vulnerabilities quickly once they have been identified.

Implement Shift-Left Approach With These Tools

Below mentioned tools, when implemented in CI/CD pipeline, will empower developers in finding the security loopholes, if any, at the right time.

  1. Fortify Static Code Analyzer (SCA) - 

The Micro Focus Fortify Static Code Analyzer (SCA) can identify, analyze, and resolve complex issues efficiently as it scans massive amounts of code in a flash followed by immediate actionable results; making it convenient for developers to create secure code.

SCA plays an essential role in creating secure software by identifying vulnerabilities in software security architecture and application code with minimal effort & in negligible time; without compromising on the quality of the code. 

  1. Black Duck - 

Black Duck software composition analysis solutions and open source audits give you the insight you need to track the open source in your code, mitigate security & license compliance risks, and automatically enforce open source policies using your existing DevOps tools and processes.

Watch this video further to understand about AppSec Shift-Left Approach-

Open Source and Third-Party Software Audits

No matter what your organizations’ business is, you must be using open-source in one or the other way. The question that arises with the use of open-source is, whether you know how your organization is using it, what kind of licenses are playing the roles, and whether you can meet all of your license requirements. 

To answer all these questions, an audit is conducted to find what kind of open-source software (OSS) is present within your code and what licenses that OSS falls under.

Black Duck, an open-source library analyzer, comprises of following features-

  • Open Source and Third-Party Code Audit

Provides you with a complete open source bill of materials (BOM) for the target codebase; showing all open source components and associated license obligations and conflict analysis.

  • Open Source Risk Assessment

It offers a detailed view of open source risks in the codebase, including known security vulnerabilities, using Black Duck Enhanced Vulnerability Data. It can serve as a high-level action plan to prioritize research and potential remediation actions.

  • Web Services and API Risk Audit

Lists the external web services used by an application, with insight into potential legal and data privacy risks. It allows you to quickly evaluate web services risks across three key categories, i.e., governance, data privacy, and quality.

Conclusion

The software development life cycle (SDLC) is constantly increasing the pace and becoming more automated.

Developers must keep up with the pace and leave security behind with the shift-left approach. Considered as the fastest and most comprehensive tool, it can be easily integrated into DevOps pipelines to analyze the code, and boost security into digital SDLCs without compromising on the innovation part!

 

Srijan takes security issues as a serious threat to organizations’ valuable assets and progress. And so, to mitigate the risk, it has provided its clients with a solution to deal with it efficiently. You too can reach out to us for the same. Contact now!

Topics: Drupal, Planet Drupal, Security, Framework and Libraries, Opensource

Setup React App From Square One Without Using Create-React-App

Posted by Pradeep Kumar Jha on Nov 1, 2019 6:17:18 PM

The breakthrough in technology has brought a whole new range of tool suite for developers to make the software development process more efficient. React App is among one of them! A prominent tool recommended by the React community to create single-page applications (SPAs) and also get familiar with React.

React App ensures that the development process is refined enough to let developers leverage the latest JavaScript functionalities for better experiences and optimization of the apps for production.

For one of our clients- a giant retail travel outlet - who went out to get a realistic travel budget in mind for the travelers to plan ahead and avoid spending shocks along the way we built a budget planner. 

Built on React.js on top of Drupal, it is a dynamic feature and can be added anywhere in the website (under blogs, services) without coding. 

Creating React App doesn't require configuration of web pack (bundler for modules) and babel (compiler). They come inbuilt. Developers can right away start with coding here. However, the drawback is that they won’t be able to get an idea about things happening in the background.

If we set up React App without using the Create React App, then we will be able to know which all NPM packages/components are needed to make react app working.

About React App

Create React App was built by Joe Haddad and Dan Abramov. The GitHub repository is well-maintained by the creators to fix errors and deliver updates frequently. 

It is a prominent toolchain for building apps quickly and efficiently. A toolchain can be defined as a set of different s/w development tools that are optimized to perform specific functions. For example, the C++ development process requires the compiler to compile the code and a build system, say CMake, to manage all the dependencies. Similarly, the React App is used to create “hello-world” applications.

This blog will showcase how to create a React app from scratch. The prerequisite is to have the NPM package manager installed in the system.

Below mentioned are the steps for the same-

Step 1- Create an app directory

mkdir myApp

Step 2- Access myApp folder and run 

npm init

This, in turn, will create a package.json file for which you can provide the name and version.

Or

npm init -y

This will create a package.json file with a default package name and version.

Step 3- Install react and react-dom packages

npm install react react-dom

This will create a node_modules folder with all dependent libraries to further add dependency inside package.json file)

Step 4- Create a .gitignore file, to avoid pushing unnecessary files to GitHub

vi .gitignore

Under files section, add all the files which you don’t wish to be tracked by Git

  1. node_modules
  2. dist
  3. ._

dist ( Distributed folder ):- This is an auto-generated build directory. We don’t require this folder because it will be generated by the compiler.

Step 5- Create an app folder

mkdir app

Access app directory and then create three files 

  1. touch index
  2. js index.css
  3.  index.html

Step 6- Edit index.html and add below snippet

<!DOCTYPE html>

<html>

    <head><title>

        my-app

    </title></head>

    <body>

        <div id="app"></div>

    </body>

</html>

( No need to add any styling inside index.css file as of now )

Step 7- Edit index.js file and add below snippet

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

class App extends React. Component{

    render(){

        return(

            <div>Hello World</div>

        )

    }

}




ReactDOM.render(<App />, document.getElementById('app'))

At the time of running this JSX code (XML/HTML- like syntax used by React that extends ECMAScript) in the browser, it will drop an error. Because the JSX code browser doesn’t understand and that is when we require Babel and Webpack.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

NPM install takes 3 exclusives, optional flags that either save or duplicate the package version in your main package.

1.  JSON: -S, ~save: 

The package appears in your dependencies

2. -D,~save.dev: 

The package appears in your devDependencies

3. -O, ~save-optional:

The package appears in your optionalDependencies

We will use Flag--save-dev to differentiate between built dependency & app dependency. 

Once installed successfully, you can check the package.json file to check the differences.

Webpack Configuration

Webpack, as stated is a module bundler, which primarily focuses on bundling JavaScript files for usage in a browser. Though it is also capable of transforming, bundling, or packaging just about any resource or asset.

Check the steps below for webpack configuration-

touch webpack.config.js

Step 1- Add below snippet in this file

var path = require('path');

var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {

    entry : './app/index.js',

    output : {

        path : path.resolve(__dirname , 'dist'),

        filename: 'index_bundle.js'

    },

    module : {

        rules : [

            {test : /\.(js)$/, use:'babel-loader'},

            {test : /\.css$/, use:['style-loader', 'css-loader']}

        ]

    },

    mode:'development',

    plugins : [

        new HtmlWebpackPlugin ({

            template : 'app/index.html'

        })

    ]




}

Step 2- To allow babel-loader work well, we have to add babel preset config to package.json

"main": "index.js",

"babel":{

    "presets" : [

      "@babel/preset-env",

      "@babel/preset-react"

    ]

  }

Step 3- To run build, we need to add webpack to script within the package, i.e.,  package.json

"main": "index.js",

  "babel":{

    "presets" : [

      "@babel/preset-env",

      "@babel/preset-react"

    ]

  },

  "scripts": {

    "create": "webpack"

  },

Step 4- Run below command

npm run create

With this, webpack will be created, which, in turn, will create a dist folder and our bundle file including index.html.

Watch this video to learn more about it

 

Step 5- Now to start webpack dev server, add below snippet inside package.json file

"scripts": {

    "start": "webpack-dev-server --open"

  }

It will start building our code as soon as we run npm start.

Step 6- All setup is done. Now run `npm run start` command to see the result on the browser.

The final directory structure will somewhat look like this as shown in the picture - 

 

Note: You might observe some storybook related extra files in the picture. However, these files won’t be visible in your setup. If you want to know about the storybook, stay tuned for our next blog.

Conclusion

I hope that now you have understood the fundamentals of Create React App better. If Yes, then implement the given steps right away and start building your awesome ideas!

Stay tuned for my next blog in which I will discuss Storybook. 

 

Happy Coding!

Topics: Planet Drupal, JavaScript & UI/UX, Architecture, Framework and Libraries

CSS Grid vs Flexbox - Which One Should You Opt For?

Posted by Manjit Singh on Apr 8, 2019 5:39:00 PM

Grid or Flexbox?

While CSS Flexbox offers a one-dimensional layout model powerful alignment and space distribution, CSS Grid lets you quickly create flexible and two-dimensional layouts. 

 

They can both be used to place, size, align and architect the website designs.

But dimensions aren’t the only value proposition between the two. Let's learn about CSS Grid and Flexbox together!

The Fundamentals

The CSS Grid Layout offers a two-dimensional grid-based layout system, with rows and columns. It makes designing web pages easier, without having to use floats and positioning.

CSS-Grid-Srijan

Layout design of CSS Grid

The CSS Flexbox offers a one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes.CSS-Flexbox -Srijan

Layout design of CSS Flexbox

A Quick Comparison

Element Grid Flexbox
Dimension Two dimensional  One dimensional
Support type Layout-first Content-first
Page Responsiveness Yes Yes
Other features Can flex a combination of items through space-occupying features Can push content elements to extreme alignment
Browser Support Firefox, Chrome, Safari, IE10+, IOS Safari  Firefox, Chrome, Safari, IE10+, IOS Safari, Opera

Let’s take a look at the two major points of difference between Flex and Grid

One vs Two Dimension


Grid is made for two-dimensional layout while Flexbox is for one.
This means Flexbox can work on either row or columns at a time, but Grids can work on both.

When working on either element (row or column), you are most associated with the content. Flexbox, here, gives you more flexibility. HTML markup and CSS will be easy to manage in this type of scenario.

However, when working with the overall web page layouts, CSS Grid does away with the nightmares of coding. It gives you more flexibility to move around the blocks irrespective of your HTML markup.

Content-First vs Layout-First

Another major difference between Flexbox and Grids is that the former works on content while the latter is based on the layout. Let’s take a quick look:

Flexbox 

Let’s say we want to recreate this design in Flex

flexbox-recreate-srijan

HTML:

 <header>

  <div>Home</div>

  <div>Search</div>

  <div>Logout</div>

</header>

 CSS:

header {   
display: flex;
}
 header > div:nth-child(3) { 
  margin-left: auto;
}

 home-screen-service-srijan-technologies

 Items will place automatically in one line and you don’t have to add anything else except display: flex ;; so the items are free to take their appropriate place.

Let’s see how we will achieve the same design with CSS Grids.

header {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

display-grid-srijan-technologies

Although they both look similar, the difference in layout can be seen with Chrome dev tools.

srijan-technologies-css grid-flexbox

Can you see the grid columns & content? So what did Grid actually do?

It divided the wrapper into 10 columns and placed each item into those grid cells. It forced us to divide the layout into 10 columns. But this limitation was not there in the flexbox since it adjusts the items automatically.

We move forward with shifting one element (say, log out) to the extreme right.

Here’s how we do it.

header > div:nth-child(3) {
  grid-column: 10;
}

div-nth-child-srijan-technologies

grid-vs-flexbox

In this case, we are forcefully moving log out to the last column, which is wrong.

This is how it will look like when we will combine both the header and other web page blocks.

grind-container-flexbox-container-srijan-technologies

Conclusion

  • CSS Grids helps you create the outer layout of the webpage. You can build complex as well responsive design with this. This is why it is called ‘layout first’.
  • Flexbox mostly helps align content & move blocks.
  • CSS grids are for 2D layouts. It works with both rows and columns.
  • Flexbox works better in one dimension only (either rows OR columns).
  • It will be more time saving and helpful if you use both at the same time.

While Grid and Flexbox can be defined as the parent-children element, both have their own strengths and limitations. It is wise to understand their ability before deciding upon which one to choose.

Looking for frontend expertise? Connect with us at business@srijan.net and let our experts handle your worries.

Topics: User Experience and User Interface, Framework and Libraries

Variable Fonts? Lets explore it

Posted by Manjit Singh on Dec 4, 2018 4:01:00 PM
The Basics of Variable Fonts

A couple of days ago, I got to know about variable fonts. When I heard about variable fonts, there were few questions in my mind.

  • What are variable fonts?
  • Why do we need it?
  • How is it different from other fonts?

A variable font file is a single file which behaves like multiple fonts. So you don’t need to keep multiple font files like thin, italic, bold, regular medium etc. This makes for huge space-saving when rendering a page. These are Opentype font formats in which multiple individual fonts can be compactly packaged within a single font file. And we can change the whole complete font by making simple variations within it.

The technology behind variable fonts is officially called OpenType Font Variations. It has been jointly developed by Microsoft, Google, Apple, and Adobe, which means it will soon be compatible to all major browsers.

As of now it is supported by the following browsers:

variable fonts - srijan.netSource: https://caniuse.com/#feat=variable-fonts  

Core Concept

The core concept of variable fonts is that a single font has multiple axes and by changing the values of those axes we can create variations in the font.

For example, the Weight axis might connect to a Light style axis. And if we change the Weight then the font will turn into a lighter version of its original style.

variable fonts 2 - srijan.net

Here are the axes whose values we can change to get the required font style:

Weight
wght
Width
wdth
Slant
slnt
Optical Size
opsz
Italics
ital
Grade
GRAD

In order to add a variable font first we must link it

@font-face {  

font-family: 'Roboto';  

src: url('../fonts/Roboto-min-VF.ttf');

}

The way we define an axis value is by using the CSS property  font-variations which has a series of values that pair the axis tag with an instance location:

#font-amstelvar { 

font-family: 'Roboto';

font-variation-settings: 'wdth' 400, 'wght' 98;

}

gingham-weight-variable fonts - srijan

As you can see the variation in the fonts with changing the width & weight.

Drawbacks

 

Variable fonts are relatively new and hence not yet supported by Internet Explorer 11 or lower version.

Some good resources you might be interested in: 

Topics: User Experience and User Interface, Framework and Libraries

A Simple Guide to CSS Grid Layout

Posted by Manjit Singh on Nov 13, 2018 12:21:00 PM

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns. It is powerful tool that allows for two-dimensional and flexible layouts to be created on the web. And for those who prefer to build designs from scratch, it works a lot better that other CSS frameworks like Bootstrap, Foundation, or Semantic UI.

Let’s directly jump into the practical implementation.

HTML Layout

Grids will only work if you have particular HTML layout - Parent & Child. Parent is the actual grid and child are the actual content inside the grid.

<div class="wrapper"> 
<div class="item-1">one</div>
<div class="item-2">two</div>
<div class="item-3">three</div>
<div class="item-4">four</div>
<div class="item-5">five</div>
<div class="item-6">six</div></div>

Display Grid

To make wrapper div into grid, simply give it a  display: grid;

.wrapper {  display: grid;}

Columns & Rows

To create columns and rows of the grid, we have to use the  grid-template-row  and  grid-template-column  properties.

.wrapper {  
display: grid;   grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;}

As you can see, we have specified the three values to  grid-template-columns  & two values to  grid-template-rows . It means the layout will be of three columns & two rows.

This is how the layout will look:

Placing Items in Grid

Before placing items in Grids, it is important to understand the grid lines’.

To position and resize the items we’ll target them and use the  grid-column  and grid-row  properties:

.item-1 {  
 grid-column-start: 1;   
grid-column-end: 4;}
OR

.item-1 {   grid-column: 1/4; //Shorthand property}

This is how  .item-1  will look like:

On the other hand, if we change to this

.item-1 {   
grid-row-start: 1;   
grid-row-end: 4;}
OR
.item-1 {   grid-row: 1/4; //Shorthand property}

This is how the  .item-1  will look like:

As you can see,  grid-rows  &  grid-column allows you to make complex layouts without any change in HTML DOM.

Grid-area Property

The grid-area property can be used as a shorthand property for the  grid-row-start/ grid-column-start/ grid-row-end  and the  grid-column-end   properties.

.item5 { grid-area: 1 / 2 / 3 / 4;}

This is how it will look:

Naming of Grid Items

We can assign a particular name to grid items using  grid-area  property.

HTML:

<div class="wrapper">
<div class="item-1">Header</div>
<div class="item-2">Left Sidebar</div>
<div class="item-3">Main</div>
<div class="item-4">Right sidebar</div>
<div class="item-5">Footer</div></div>

CSS:

.container { display: grid; grid-template-areas:
'header header header header header header'  
'menu main main main main right'  
'menu footer footer footer footer footer';}
.item-1 { grid-area: header; }
.item-2 { grid-area: menu; }
.item-3 { grid-area: main; }
.item-4 { grid-area: right; }
.item-5 { grid-area: footer; }

That was a quick basic guide to CSS Grids. Here are the best resources to dive in further:

Topics: Framework and Libraries

Component based development: Why that’s the way to go for media Enterprises

Posted by Ishan Mahajan on Jun 4, 2018 3:02:00 PM

Enterprises today can no longer make do with their online presence being limited to one website. Large organizations, especially media houses, usually have multiple websites and are fast creating other channels like mobile applications, digital signage, and chatbots, to reach potential consumers. They also routinely launch niche digital properties - an app for a movie promotion, a microsite to cover an emerging people’s movement, and so on.

But are media enterprises setting up these channels in the most efficient way? 

An all-too-familiar scenario is that they create different online channels from scratch, and they work just fine, but the user experience is different across all of them. Or maybe different teams are working on different projects, and each team is implementing a different solution for the same design and development problem. 

So there’s duplication of effort, more time and money being spent in development, and yet being unable to deliver a consistent user experience.

So what’s the solution? Component Based Development.

What is Component Based Development?

Component Based Development (CBD) relies on creating “components” - a defined set of design elements and functionalities - and then putting them together to develop a complete page or site or application. 

For example: a “Buy Now” button, which puts together a button shape, colour and text, and the ability/functionality to achieve a certain task, is considered a component. 

CBD can be loosely broken down into three stages:

  • Define the components: What each component looks like and how it functions. So elements like a button, a social share widget, a video, a text box are all components that are designed and developed to function in a particular manner.

  • Design the interactions: Define how components interact with each other. This ensures that there is a predictable outcome, every time we put certain components together. 

  • Develop the system: Once components and their interactions are in place, development becomes just a matter of putting components together to create the systems we want. 

 

Component Based Development requires that you build a repository of components and interactions only once. When you have this repository in place, you get a collection of components that have the desired capabilities and design, right out-of-the-box. And all subsequent development happens by simply reusing these components. 

How Do We Use Component Based Development?

At Srijan, our teams are currently working on revamping multiple sites for a media conglomerate. The sites each have their own styles, and themes, and offer a different use experience. Without any sort of standardization in the design and the code-base, revamping each individual site was looking to be a time consuming process. 

That’s when we suggested that they use the CBD approach to revamp their site. The idea was to standardize each component, so that they offer the exact same functionality and experience across all sites. But we also made sure there is enough flexibility to make the components look different to fit the theme of each site. 

Here’s an example:

component based development: standardization of elements
 

The share widgets on three of the client sites were completely different - both in terms of presentation and functionality, some had a share counter, some didn’t. With CBD, the share widget was standardized - number of social platforms, functionality of the share counter are all similar. But the look and feel of the widget is different across all three sites, in keeping with their themes. 

This is just a small example of how we reused components across different sites. We took a similar approach with defining components like headlines, video and text boxes etc, and then customize them as per the theme of each site. 

Prepare a global style guide

The process of creating components and interactions also allowed us to prepare a global style guide that is applicable to all of our client’s online properties: sites, applications, chatbots, digital signage etc. This means that independent teams working of any of these channels, or even when creating new online channels, have access to a pre-approved set of components. So all their online channels and interactions offer a cohesive look and feel, and consistent experience to the users. 

We use tools like PatternLab, which works on the Atomic Design Principle, to create these style guides. These are readily available to any of our client teams, working on any project, so they can reuse elements without worrying about deviating from brand guidelines.

Here’s an example:

global style guide for photo gallery

This is a photo gallery style guide on PatternLab. Any developer in the organization can refer to the style guide and pick up the exact HTML, JavaScript and CSS from the style guide; to make sure the photo gallery feature of the client’s brand looks and works the same, irrespective of the channel.

Another example is the content listing feature, showcased below:

global style guide for content listing

Here, the image, headline, and social share widget are grouped together to form a ‘Listing’ component. This can be re-used by developers as is, or as a part of a larger component. But this component is ready to use, and will always work the same way, no matter where it is used.

What are the Benefits of Component Based Development?

Component Based Development brought in several benefits for our client:

Faster development and time-to-market

The initial phase of CBD, with the need to build every single component, is time consuming.
However, that is a one-time investment that ensures faster development and time-to-market at every subsequent stage. 

For our clients, adding a new page to a website, or even creating a whole new site, would simply involve reusing the components and coupling them together to design what they want. This is especially helpful when responding to time-sensitive opportunities, or creating temporary niche microsites, let’s say for a particular campaign, or for a rapidly developing story.

There are also significant cost savings to be made, as the teams do not have to create every online channel from scratch.

Easier testing and maintenance

With CBD, every component is tested after development. The components interact with each other through explicitly defined integrations. So when we put them together to create a system, the need for repeated regression testing is reduced. Sites and systems developed with CBD are also easy to maintain since the codebase is clean, and it’s easy to identify and correct errors.

Smoother distributed development

With a pre-designed set of components, each system can be independently designed by distributed teams, without the need for complex branching and merging. Each section of a large site, or each system of an application, can be built by different teams, and then put together to create a whole. Since there are clear boundaries and interaction interfaces between systems, distributed development is easy and simplified.

Incorporate design and development best practices

With different teams working on different sites, design and development is not always standardized. So while one team is following design best practices, the other teams might not be. Similarly, a few teams might be developing keeping in mind code reusability, while others may not be taking that into consideration at all. With CBD, the components have the design best practices and code reusability built into them. So when new sites and systems are developed using these components, they all have the same design and developments standards and best practices.

For media enterprises, time is of the essence. Whether it’s launching new online channels, or reporting breaking news, or promoting a blockbuster movie - early to the market means greater consumption and higher revenues. So the ability to quickly build new online properties, while maintaining consistent user experience is a must-have. And Component Based Development helps do that in the best possible way.

Looking to implement Component based development at you media enterprise? Get in touch with our experts, and understand how best to implement CBD for your organization, and the cost savings you can expect.

Topics: Media & Publishing, Framework and Libraries

Introduction to Nightwatch JS

Posted by Deepshikha Singh on Mar 15, 2018 2:18:00 PM

In this blog, we are going to take a look at how you can intsall and configure Nightwatch JS, and its integration with Jenkins. Before that let's find out what Nightwatch JS is and what are its features.

What is Nightwatch JS?

Nightwatch.js is an easy to use Node.js based end-to-end (E2E) testing solution for browser based apps and websites. It uses the powerful W3C WebDriver API to perform commands and assertions on DOM elements. 

Features of Nightwatch JS

  • Clean syntax : Simple but powerful syntax which enables you to write tests very quickly, using only Javascript (Node.js) and CSS or Xpath selectors. 
  • Built-in Test Runner : Built-in command-line test runner which can run the tests either sequentially or in parallel, together, by group, tags or single. Grunt support is built-in. 
  • Selenium Server : Controls the Selenium standalone server automatically in a separate child process; which can be disabled if Selenium runs on another host. 
  • Cloud Services Support : Works with cloud testing providers, such as SauceLabs and BrowserStack
  • CSS and XPath Support : Either CSS or Xpath selectors can be used to locate and verify elements on the page or execute commands. 
  • CI Support : JUnit XML reporting is built-in, so you can integrate your tests in your build process with systems such as Teamcity, Jenkins, Hudson etc. 
  • Easy to extend : Flexible command and assertion framework which makes it easy to extend, in order to implement your application specific commands and assertions.  

How does Nightwatch JS works?

Nightwatch works by communicating over a restful HTTP api with a WebDriver server (typically the Selenium server). The restful API protocol is defined by the W3C WebDriver API. See below for an example workflow for browser initialization.

Most of the times, Nightwatch needs to send at least 2 requests to the WebDriver server in order to perform a command or assertion:

  • First is the request to locate an element given a CSS selector (or Xpath expression) 
  • Second request is to perform the actual command/assertion on the given element

Installation:

Assuming you have nodejs installed in your system, here’s how to go about installing Nightwatch JS

  • To install the latest version using the npm command line tool, run the following: $ npm install [-g] nightwatch where ‘g’ is for installing globally 
  • Make sure you have Java installed and Selenium server standalone jar downloaded in your system 
  • Selenium Server Setup : Start selenium server using command:

    selenium-server-standalone-{VERSION}.jar

Configuration:

The test runner expects a configuration file to be passed, using a nightwatch.json file from the current directory by default, if present. A nightwatch.conf.js file will also be loaded by default, if found.
Let's create the nightwatch.json in the project's root folder and add this inside:
{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "",
  "globals_path" : "",

  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "marionette": true
      }
    },

    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    },

    "edge" : {
      "desiredCapabilities": {
        "browserName": "MicrosoftEdge"

Create your Test Case in Nightwatch.js

We basically define your tests within a Node module:

module.exports = {
    "My test case": function(browser){
        // control the browser
    }
}

  • Nightwatch then invokes that test methods, passing you a “browser” object which you can control by invoking some Nightwatch commands or assertions. That’s pretty much it. 
  • Under the hood, the Nightwatch test runner communicates with the Selenium server over the Selenium WebDriver Wire protocol. 
  • The Nightwatch test runner can be controlled through command line arguments. However I strongly suggest you use the settings.json file where you specify the behavior of the runner, the input and output directories, and the Selenium component. 

Run Test Case in Nightwatch JS

  • Nightwatch <filename.js> 

Integration with Jenkins

Jenkins is an open-source continuous integration server written in Java. It is by far the most widely used tool for managing continuous integration builds and delivery pipelines. 

In order to integrate Jenkins with Nighwatch JS, you first need to have the same installation setup on the server where Jenkins is running:

  • Node.js and npm 
  • Firefox installed (as it will be used by the Selenium Server by default) 
  • (Nightwatch, selenium standalone server etc…will be delivered by our setup) 
  • Running nightwatch is done by simply invoking it from a batch command : nightwatch <filename.js>
     
  • The runner will produce a nice JUnit compatible XML file which can be taken by Jenkins for presenting the results and eventual failures to us.
     

So that's how you can install and started working with Nightwatch JS. If you found this blog useful, read more about PhantomJS and ChimpJS. Also watch our webinar on Eliminating JavaScript Codesmells.

Topics: Framework and Libraries

IoT Trends and Expectations: 2018

Posted by Gaurang Agrawal on Jan 11, 2018 12:06:00 PM

By 2025, IoT is expected to reach a staggering 75 billion devices. As a technology that is impacting every conceivable industry, one can expect numerous IoT investments and adoptions by major enterprises. But there may also be potential data breaches as well as security issues. In 2018, IoT is expected to have a steady growth, but here are five significant trends to look out for:

Rising Adoption of IoT Devices

According to the Business Insider, enterprise spending on IoT solutions will reach $6 trillion by 2021. Several enterprises are cashing in on this to increase customer engagement and improve efficiency of operations.

  • Retail enterprises aim to enhance customer experience.
  • Healthcare and supply sectors use it to connect with patients via wearable devices, and track inventory.
  • Home security industry is providing smart home devices which would offer the advantages of home automation comfort along with home security and energy saving capabilities.

 

Now is when enterprises across industries start building out their IoT strategy to reach an advantageous position much before their competitors.

Adopting IoT in Retail

Forrester Research predicts that IoT will become the backbone of consumer value as it continues to grow. This year, the IoT may see a widespread adoption in the retail sector for connecting with customers, growing their brands, and improving the customer experience.

Many tech-savvy companies are eager to invest in sensors-based analytics driven by IoT as it provides them numerous data points to market their products more effectively to prospective customers. They are open to using innovative and exciting ways of tracking their inventory, managing losses from theft, and reaching out to their customers.

The boom in embedded-sensor driven retail shopping has the capability to single handedly change the way customers find and buy their favorite products.

IoT Advancements in Healthcare

According to data from Frost and Sullivan, the internet of medical things is expected to grow at a compound annual growth rate of 26.2% and reach $72 billion by 2021. It is one of the most important areas for application of IoT.

As the healthcare providers and the patients become increasingly tech-savvy, it paves the way for following adoptions in 2018:

  • Sensors, wearable tech, medical equipment, and health monitors will all interact to improve patient care
  • Big-data driven solutions will change how people access and pay for their healthcare services
  • Mobile health applications and virtual assistants can monitor health and smart cars can monitor patient vitals in transit.

Security Challenges to the New Network

The expanding network and huge volumes of data will put vital information like health of patients and safety of homes at risk. The challenges of new network security will push data security personnel to work harder.

Security features such as layered machine-to-machine authentication, biometric logins and use of Artificial Intelligence (AI), machine learning and big data techniques may prevent security breaches and help disable vulnerabilities of global internet-infrastructure systems.

Symantec’s Internet Security Threat Report April 2017 identified that weak passwords was the main reason behind IoT malware. Since most IoT device manufacturers didn’t give customers an option to change the default password, it led to the highest number of attacks. But 2018 would witness both manufacturers and consumers getting more aware about their IoT security.

Greater Access to Capital

According to a Forrester survey, 19% of respondents were using IoT and 28% of them planned to adopt it in near future. The increase in the usage of IoT has encouraged the investors in utilities, transportation, manufacturing and mining industries to invest and indulge in IoT’s expansion. The year 2018 will see IoT-based ventures have a greater access to startup capital and will be taken more seriously in the market.

These are some of the trends which would be dominating the IoT ecosystem for the coming years. The hospitality industry is already deploying major IoT solutions for travel, and other industries are fast following suit. The great advancements will definitely push the boundaries of IoT, making it more friendly and intuitive. As enterprises work harder on reducing the challenges of network security, IoT sure has a promising future.

Topics: Machine Learning & AI, Framework and Libraries

Why you need a DevOps Audit

Posted by Pavan Keshavamurthy on Dec 21, 2017 3:19:00 PM

You have convinced your team to start adopting DevOps practices. They have automated some processes, and are using tools like Jenkins and Travis.CI for continuous integration. You see the team working more efficiently than before, but you are yet to see the promised “significant acceleration in the delivery pipeline”.

Sounds familiar?

That could be because your team has gone the DevOps way, but not in the right manner. According to Mike Kavis, VP, Cloud Technology Partners, here’s what could be happening:

  • A New Silo: You hire a new set of people, the DevOps engineers, whose job is to take care of all the automation and work with the new tools. But that’s just adding another silo, and not really solving anything.

  • No Ops Needed: The Dev team decides to take up the infrastructure-as-code principle, and provision their own environments. Their work gets faster, but the challenges in network, security compliance, and support, still remain.

  • Rebranding Ops: The Ops team gets rebranded as a DevOps team. They’ve solved the problems with provisioning and deployment, but the Dev team’s challenges around configuration management, testing, and continuous integration still remain.

 

Your DevOps practice could have fallen into any, or all of these traps. 

How do you get from here to a stage where DevOps is bringing in measurable ROI?

You need to identify where you stand on the DevOps maturity model, and how to move forward. And that’s when you required a DevOps audit.

What to Expect Out of Your DevOps Audit

All enterprises, in their quest for adopting DevOps, go through the DevOps maturity model

Why You Need a DevOps Audit

They usually move from being a siloed organization to slowly adopting different DevOps practices, starting with automation. And finally, they become a DevOps practitioner with one-touch deployment, faster bug resolutions, and reduced system failures.

At the initial stages, the team itself is concentrating on collaborating with each other, and integrating automation. But there’s no bird’s eye view of where their DevOps practice is headed. 

A DevOps audit at this stage helps enterprises:

Benchmark their DevOps efforts against industry best practices

This involves identifying your position on the DevOps maturity model and assigning a DevOps maturity score for your enterprise. It’s helpful for the team if this score is presented as a breakdown of different aspects of the delivery cycle. For example: individual scores for performance/processes in terms of version control, deploy automation, lead times, failure notification etc.

Understand the current bottlenecks in their delivery pipeline

The audit should identify sections of your pipeline where you require better processes, or those that could cost you a successful roll-out. It should also present actionable insights that tell your team:

  • which processes to automate

  • what are the right tools for the job

  • what are the flaws in their current risk management and rollback strategies

 

The idea is to give your team a set of immediate next steps to work upon.

Identify low hanging fruit

You should expect your audit to pinpoint sections of the pipeline where DevOps practices can generate the highest initial impact. 

For example: If the QA team never gets adequate time to test each build, leading to increased bug reports, the audit should showcase that as your low-hanging fruit. 

In this case, you can have an automated script that will perform a standard set of tests for each commit, before pushing the code forward. That will significantly speed up the development, while ensuring lower errors. 

Chart out a Roadmap 

The audit should lay out a plan for your teams to advance on the DevOps maturity scale. You should expect a DevOps playbook that lays out the right practices and toolchains, to make your teams competent and competitive.

For enterprises to retain their competitive edge against industry disruptors, DevOps maturity is critical. Teams with a high-performing DevOps methodology can deploy code 46X more frequently, and have a 96X faster mean time to recovery. Those are hard to ignore gains.

So, are you ready to audit your DevOps practice? Drop us a line and explore how our DevOps consulting team can help.

Topics: CI/CD & DevOps, Framework and Libraries

Discussion

Write to us

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms Of Service apply. By submitting this form, you agree to our Privacy Policy.

See how our uniquely collaborative work style, can help you redesign your business.

Contact us