DEV Community: madhu

Why I am seeing Stack-overflow site this way, Is it Hacked?

madhu — Mon, 01 Apr 2019 13:13:27 +0000

[Off Topic] Can testers and developers be friends?

madhu — Fri, 28 Sep 2018 10:33:44 +0000

What are the advantages of ES7 over ES6 (Focusing on React)?

madhu — Wed, 29 Aug 2018 08:54:55 +0000

I read in ES7 we can declare the state variables outside the constructor and also declare propTypes as a static properties, declared as high as possible within the component code.

import React, { Component } from 'react'
import { string, object } from 'prop-types'

export default class ProfileContainer extends Component {
  state = { expanded: false }

  static propTypes = {
    model: object.isRequired,
    title: string
  }

  static defaultProps = {
    model: {
      id: 0
    },
    title: 'Your Name'
  }

}

Could anyone explain me what are the advantageous of doing it, Also I would want to know new features of ES7, A layman explanation.

React, when to use propTypes what are the best practices?

madhu — Mon, 27 Aug 2018 12:14:53 +0000

Storybook - UI component development tool for React, Vue, and Angular (Article focusing on React)

madhu — Fri, 24 Aug 2018 09:40:32 +0000

Storybook is a UI development environment for your UI components. With it, you can visualize different states of your UI components and develop them interactively.Being able to quickly visualize components and interact with them is very useful.

With Storybook, it’s easy to leverage those React components for UI testing.

Once you’ve made a React component, you will need to add styling and test how the component renders with different data sets. You can pass data into a component, and Storybook will render the component by itself.

This can be helpful for special cases like no data (where a “no results” message might be displayed), or longer content that might mess up the UI. Storybook tests allow you to test out these UI cases without having to fiddle with test data in your database, hardcoded into your component, and so on.

Get Started

Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app.

Setup React Storybook

To set up React Storybook the first thing you’ll need is a React project. If you don’t have a suitable one at the moment, you can easily create one using create-react-app.

The easiest way to get started with Storybook is to use the getstorybook tool, a CLI that scans your app and will make the (small) changes required to get storybook working. You can use it like so:

npm i --save-dev @storybook/react

cd [your-app]
getstorybook

Note: I use yarn package manager in my project since I found some issues with running getstorybook command inside my npm project.

getstorybook will add a folder to your react app called .storybook/ which includes a file config.js and addons.js. This file is the “entrypoint” for your storybook and from here you need to require each file that contains a story for any component. The default is simply to start at a file named stories/index.js, although you can customize this.

To run Storybook, execute yarn run storybook and open the address displayed (http://localhost:9009/). The app should look like this:

Writing a New Story

configuration

We have to let Storybook know where the stories are in .storybook/config.js.

import { configure} from '@storybook/react';

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
   req.keys().forEach(path => req(path)); // customized stories path
}

configure(loadStories, module);

Either it could be direct story path or customized stories path where it takes all the files matching the regex /\.stories\.js$/.

A simple Stroy

Writing a simple welcome.js component which just contains welcome text.

import React, { Component } from 'react'

export default class Welcome extends Component {

 render() {
   return (
     <div>
       <h1>{this.props.message}</h1>
     </div>
   )
 }
}

Creating a simple welcome.stories.js story.

import React from 'react';
import { storiesOf } from '@storybook/react';
import Header from '../components/Welcome';

const stories = storiesOf('Welcome', module);

stories.add('welcome message', () => (

   <Header
     message="Welcome to Storybook!"
   />

));

Storybook will look like this.

Addons

Storybook is extremely useful by itself, but to make things better it also has a number of addons. In this article, we’ll cover only some of them, but be sure to check out the official list later.

Note: the version of the addons should be compatible with version of Storybook.

storybook-addon-jsx

This Storybook addon shows you the JSX of the story. It can be useful to see what props you set, for example.

yarn add -D @storybook/addons

yarn add -D storybook-addon-jsx

After installing we need to globally configure it in .storybook/config.js.

import { configure} from '@storybook/react';
import JSXAddon from 'storybook-addon-jsx';

setAddon(JSXAddon);

const req = require.context('../src/components', true, /\.stories\.js$/);

function loadStories() {
   req.keys().forEach(path => req(path)); // customized stories path
}

configure(loadStories, module);

Now we have to replace the .add with .addWithJSX.

stories.addWithJSX('welcome message', () => (

   <Header
     message="Welcome to Storybook!"
   />

));

Storybook Addons section would look like this.

@storybook/addon-knobs

Storybook Addon Knobs allow you to edit React props dynamically using the Storybook UI. You can also use Knobs as a dynamic variable inside stories in Storybook.

yarn add -D @storybook/addon-knobs

Now we have to add the .addDecorator(withKnobs) to use the knob in our welcome.stories.js.

import React from 'react';
import { storiesOf } from '@storybook/react';
import Header from '../components/Welcome';

import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';

const stories = storiesOf('Welcome', module);

stories.addDecorator(withKnobs).add('welcome message', () => (

   <Header
     message={text('headline','Welcome to Storybook!')}
   />

));

Storybook Addons section would look like this.

Before using these addons we have to register these plugins inside the .storybook/addons.js file(some specific addons need not be registered like this, Please refer NPM site for details on each addons).

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';
import 'storybook-addon-jsx/register';

Few Other Addons are;

ReactJS vs Angular5 vs Vue.js — What to choose in 2018?

madhu — Mon, 20 Aug 2018 12:16:18 +0000

Some time ago we published an article with a comparison of Angular 2 and React. In that article, we showed pros and cons of these frameworks and suggested what to choose in 2017 for particular purposes. So, what is the situation in the frontend garden in 2018?

JavaScript frameworks are developing at an extremely fast pace, meaning that today we have frequently updated versions of Angular, ReactJS and another player on this market — Vue.js.

We analyzed the number of open positions worldwide that require a specific knowledge of a certain framework. As a source, we took Indeed.com and got the following distribution according to more than 60,000 job offers.

Taking into account the following data, we decided to share the main advantages and disadvantages of every frontend framework and help tech professionals or engineers to choose the best one for their development needs.

Pros and cons of Angular 5

Angular is superheroic JavaScript MVVM framework, founded in 2009, which is awesome for building highly interactive web applications.

Benefits of Angular 5:

New features like enhanced RXJS, faster compilation (in under 3 seconds), new HttpClient launch.
Detailed documentation that allows getting all necessary information for the individual developer without asking his colleagues. However, this requires more time for education.
Two-way data binding that enables singular behavior for the app which minimized risks of possible errors.
MVVM (Model-View-ViewModel) that allows developers to work separately on the same app section using the same set of data.
Dependency injection of the features related to the components with modules and modularity in general.

Drawbacks of Angular 5:

The complex syntax that comes from the first version of Angular. Nevertheless, Angular 5 uses TypeScript 2.4 which is the least difficult to learn in comparison.
Migration issues which can appear while moving from the older version to the latest ones.

Companies that use Angular 5: Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase.

Pros and cons of ReactJS

ReactJS is a JavaScript library, open sourced by Facebook in 2013, which is great for building huge web applications where data is changeable on a regular basis.

Benefits of ReactJS:

Easy to learn. React is much easier to learn because of its simplicity in terms of syntax. Engineers just need to recall their HTML writing skills and that’s it. No need to deeply learn TypeScript like in Angular.
High level of flexibility and maximum of responsiveness.
Virtual DOM (document object model) that allows arranging documents in HTML, XHTML, or XML formats into a tree from which is better acceptable by web browsers while parsing different elements of the web app.
Combined with ES6/7, ReactJS can work with the high load in an easy way. Downward data binding which means that with this kind of data flow the child elements cannot affect parent data.
100% open source JavaScript library which get a lot of everyday updates and improvements according to the contributions of developers all over the world.
Absolutely light-weighted because the data performing on the user side can be easily represented on the server side simultaneously.
Migrating between versions is generally very easy, with Facebook providing “codemods” to automate much of the process.

Drawbacks of ReactJS:

Lack of official documentation — super-fast development of ReactJS leaves no place for the proper documentation which is a bit chaotic now as many developers contribute it individually without any systematic approach;
React is unopinionated — meaning that developers sometimes have too much choice;
Long time to master which means that React JS requires deep knowledge of how to integrate user interface into MVC framework.

Companies that use ReactJS: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft.

Pros and cons of Vue.js

Vue.js is a JavaScript framework, launched in 2013, which perfectly fits for creating highly adaptable user interfaces and sophisticated Single-page applications.

Benefits of Vue.js:

Empowered HTML. This means that Vue.js has many similar characteristics with Angular and this can help to optimize HTML blocks handling with a usage of different components.
Detailed documentation. Vue.js has very circumstantial documentation which can fasten learning curve for developers and save a lot of time to develop an app using only the basic knowledge of HTML and JavaScript.
Adaptability. It provides a rapid switching period from other frameworks to Vue.js because of the similarity with Angular and React in terms of design and architecture.
Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. The main thing is that smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
Large scaling. Vue.js can help to develop pretty large reusable templates that can be made with no extra time allocated for that according to its simple structure.
Tiny size. Vue.js can weight around 20KB keeping its speed and flexibility that allows reaching much better performance in comparison to other frameworks.

Drawbacks of Vue.js:

Lack of resources. Vue.js still has a pretty small market share in comparison with React or Angular, which means that knowledge sharing in this framework is still in the beginning phase.
Risk of over flexibility. Sometimes, Vue.js might have issues while integrating into huge projects and there is still no experience with possible solutions, but they will definitely come soon.
Lack of full English documentation. This leads to a partial complexity on some stages of development, nevertheless, more and more materials are being translated into English.

UPDATE: As Natalia Tepluhina informed in her comments, Now
Vue.js has it's full English Documentation.

Companies that use Vue.js: Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters.

CONCLUSION

For a real engineer, there is no substantial difference which framework to choose, because it just takes some time to get used to the new one. In our company, we grow expertise in mostly ReactJS and Angular 2/4/5, but Vue.js is also on board. Every framework has its own pros and cons, meaning that there should be just a right choice for every single case during the product development.

source: https://www.techmagic.co/