Search

Adaptive and Predictive Project Delivery - Challenges and Use Cases

Project managers should know how to strategize projects depending on the budget, client’s requirements, deadlines and specifications. Especially, in the software development projects managing the process with the right methodology and tools is significant in meeting your process goals.When it comes to choosing between adaptive and predictive project delivery, there has been a push towards adaptive (agile) methodologies over the more traditional predictive (waterfall) methodologies in the recent years. But the most common mistake is irrespective of the project requirements the project managers follow single project management strategy.In this e-book, we present an analysis by Dan S. Roman, an outcome-driven Senior Project Manager and Scrum Master. A champion of combining best practices to achieve results, Dan shares insights from over four decades of project management experience.The e-book is a report analysis on how the delivery approach, predictive or adaptive, can address some of the failure causes identified in the Chaos reports for enterprises to evaluate the best approach to choose between adaptive and predictive delivery for projects.Dan explains what the projects challenges are and how the right delivery approach can help. He quotes use cases on the approach and says what went well and what could have been different.In conclusion, to undertake these tasks Project managers must be aware of existing and emergent practices and gather deeper knowledge for the best suitable practices.
Adaptive and Predictive Project Delivery - Challenges and Use Cases
KnowledgeHut

Adaptive and Predictive Project Delivery - Challenges and Use Cases

Project managers should know how to strategize projects depending on the budget, client’s requirements, deadlines and specifications. Especially, in the software development projects managing the process with the right methodology and tools is significant in meeting your process goals.When it comes to choosing between adaptive and predictive project delivery, there has been a push towards adaptive (agile) methodologies over the more traditional predictive (waterfall) methodologies in the recent years. But the most common mistake is irrespective of the project requirements the project managers follow single project management strategy.In this e-book, we present an analysis by Dan S. Roman, an outcome-driven Senior Project Manager and Scrum Master. A champion of combining best practices to achieve results, Dan shares insights from over four decades of project management experience.The e-book is a report analysis on how the delivery approach, predictive or adaptive, can address some of the failure causes identified in the Chaos reports for enterprises to evaluate the best approach to choose between adaptive and predictive delivery for projects.Dan explains what the projects challenges are and how the right delivery approach can help. He quotes use cases on the approach and says what went well and what could have been different.In conclusion, to undertake these tasks Project managers must be aware of existing and emergent practices and gather deeper knowledge for the best suitable practices.
1541
Adaptive and Predictive Project Delivery - Chall...

Project managers should know how to strategize pro... Read More

Introduction to Xamarin Forms- Shell

Xamarin Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require. Shell has a declarative application structure and can easily create a consistent, dynamic, customized, and featured filled UI. In other words, shell is a new replacement for every one of your Xamarin forms pages.It provides out of the box infrastructure to deliver Xamarin forms features, a simplified navigation system, and customization.Advantages of Shell:Common navigation user experience Supports URI based navigation (navigation to any page in the application) Integrated search handler Allows a single place to describe the visual hierarchy Reduces memory consumption Increases the rendering speed Prerequisites:Xamarin forms shell is available in Xamarin forms 4.0.0 and supports completely on Android and iOS. It is partially available, and is in the experimental phase on UWP. In order to use it in UWP applications, the below code needs to be added in the App class before calling Forms.Initglobal::Xamarin.Forms.Forms.SetFlags("Shell_UWP_Experimental");Getting Started: Shell Requirements   The specialty of shell is to have a built-in container that includes a flyout menu, tab page, and navigation page. So let's create a demo app having these features. Visual studio also provides a shell template. But let's add shell to our blank Xamarin forms application for better understanding. Firstly create a blank Xamarin forms project in visual studio and name it “MovieBookingApp”. In this demo app, we are going to have two categories of movies i.e. comedy movies and thriller movies. With these two categories, let's create tabbed pages and a flyout menu. Now let's add a new content page with code-behind class to our project and name it as “MainShell”. Change a contentPage to Shell in the XAML page. It should look like the below code.  Once the above step is done, similarly change the content page to shell in MainShell.xaml.cs. Our code-behind class has to inherit from Shell.using System; using System.Collections.Generic; using Xamarin.Forms; namespace MovieBookingApp {     public partial class MainShell : Shell     {         public MainShell()         {             InitializeComponent();         }     } }In the App.xaml.cs constructor, add the below code. Here we are making MainShell the root page. Once done, run the code to ensure your project builds successfully.public App()         {             InitializeComponent();             MainPage = new MainShell();         }Flyout Menu: The flyout menu is also called a side drawer or hamburger menu. We have seen multiple applications having a flyout menu. A flyout menu consists of a header which is optional, menu items(optional), and flyout items as shown in the below picture.To create the flyout menu, add the below code in MainShell.xaml and you will see the flyout menu coming up after running the project.                                 We can set the background color to the flyout menu, which is a bindable property:Shell.Flyout.BackgroundColor= Color.RedTo customise the flyout menu items, by adding the optional header, or adding an icon please read about it in the below link https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout Tabbed Bar: The navigation in Xamarin forms shell can take place through tabs and does not make use of flyout navigation. In this case, each tab bar can consist of a single shellcontent object or multiple such objects; and each object represents a single content page. The reference image is shown below. Let's create a tab bar. Add two new content pages with code-behind class to the project and name them “Comedy Movies” and Thriller Movies. Since we don't want a flyout menu here, we are going to disable it as mentioned below.   FlyoutBehavior="Disabled"Add the below code to create the tab bar.                        
8464
Introduction to Xamarin Forms- Shell

Xamarin Forms Shell reduces the complexity of mobi... Read More

Introduction to Mongo DB

MongoDB, a highly scalable No-SQL database, is used for storing information in the form of JSON strings, where the structure of the table is not fixed (unlike in SQL database). So, the advantage here is that with the help of MongoDB, we can make quick changes in our entities without actually changing the database. MongoDB is available in multiple variants and what you choose would depend on the type of development you are looking for. You can download and install the relevant server as per your operating system from here.  If you are already a Mongo user then you may have had the chance to work with the huge number of operations that Mongo provides for storing and retrieving information in a database.If you want to brush up the same before starting on this article, refer to the basics of MongoDB here. In this article, we will learn about how we can use a MongoDB database with NodeJS.  But before do that, let’s delve a little into NodeJS. Getting started with NodeJS  So what is Node JS, and why do we use it? NodeJS is a backend JavaScript runtime environment that has become a favorite with developers and designers alike, due to the marvellous advantages it offers such as minimalism, speed, and compatibility with JavaScript. Not just individual programmers but world-class top tech companies around the world are using NodeJS as their backend tech stack because of the advantages it offers.   The beauty of NodeJs lies in the fact that it allows developers to write frontend abstractions with backend written in NodeJS. We will write our first NodeJS program here but before that, we have to install NodeJs, which is pretty straightforward. Installing NodeJs Plugin for MongoDB:Follow these steps to install Node JS  Install NPM (Node Package Manager).  The Node Package Manager) plugin is used to install various NodeJS plugins with a single command. Double-check that you have npm installed in your system by simply running this command in your terminal: $ npm -v[Text Wrapping Break]6.13.6  Install the Node from NodeJs Website >> NodeJS.   See the type of Operation system and download the version as per your platform compatibility.  Follow the installation guide as suggested by the installer.  Check the node version by running this command in your terminal  $ node -v[Text Wrapping Break]v8.11.4  If you have installed Node before NPM, you will probably need to update your NPM.   npm install npm@latest -g  Installing MongoDB Node.js Driver  The Mongo NodeJS driver allows us to interact with the MongoDB databases from NodeJs applications. To install MongoDB Node.js driver, run this command in your terminal.   npm install mongodb   To see the list of current drivers installed in the system, run the following command:  npm list mongodb  If you are stuck or have issues with installation of the drivers, then this official documentation is a good reference to go through.  Now that we are ready with both the database and NodeJS backend, let’s move ahead and create a simple NodeJs project. The aim of this project is to insert and retrieve information from the database. Using Node.JS to connect to MongoDB database   To do this, we will write a simple Node.js script which will connect to our database. And then we will perform an operation to list all the databases in our cluster.Cluster? What is a cluster?     A cluster is nothing but a set of nodes that carry the copies of your database. At a high level, you can say, your database is stored inside a cluster. To work on databases with Node, the easiest way is to use Atlas service which is MongoDB’s fully-managed database. If you are still unfamiliar with these terms, you can go through the complete documentation here.    Connecting MongoDB  Now that we have all our installations in place, let’s get started with connecting our database from NodeJs. Let’s Code! We will begin with Importing the Mongo Client as shown below: const {MongoClient} = require('mongodb');  To connect to the MongoDB database we have to import the MongoClient class from the MongoDB module, the instance of which can be used to connect to the cluster or for accessing the database from that cluster. Next step is to use a Main() function, where we can call other functions and can get connected to MongoDB cluster. const uri = "mongodb+srv://:@/test?retryWrites=true&w=majority";   Note: You need to update your password and username for the user. Now that we are ready with our URI, create an instance of MongoClient as below: const client = new MongoClient(URI);  Your instance is ready, so now you can use MongoClient to connect to the cluster by calling client.connect() as below:  await client.connect();  We have used the await keyword so as to ensure that it blocks any further execution until our operation is completed. And that’s it. We are ready to interact with our database. Let’s try it out by simply printing the list of all the databases in our cluster.  await listAllDatabases(client);  You can put any name to the above function. The next step is to finally put all the functions together and wrap them in a try/catch block in order to handle any errors. try   await client.connect();   await listAllDatabases(client);catch (e) {    console.error(e);}  And, close the connection as below:  finally { await client.close(); }  No, let’s put everything together and call our main function() as:  async function main(){ const uri = "mongodb+srv://:@/test?retryWrites=true&w=majority"; const client = new MongoClient(uri); try {// Connect to the MongoDB cluster await client.connect(); // Here make the DB calls or some operations await  listAllDatabases(client);  catch (e) {    console.error(e); } finally { await client.close(); }  Break]main().catch(console.error);  //To see if there are aby errorsLet’s use our function “listAllDatabases” to list all the databases in our cluster.  async function listAllDatabases(client){  databasesList = await client.db().admin().listAllDatabases(); console.log("Databases List Is:");[Text Wrapping Break]    databasesList.databases.forEach(db => console.log(` - ${db.name}`));};  If you can’t wait to see your output, then all that is left to do is to save it. Save your file as list.js.  Time to execute the NodeJs script. Let’s execute the script by running the following command in our terminal:  (Ensure that the server is running and up!) node list.js  The output should come as below:  Databases: - data_books - data_gates - data_houses - data_nodes- data_tables- admin - local  Now that we are running with the database, let’s see the different data types they are supported on.  Mongo DB data types Have you heard of BSON? BSON is a binary-encoded format of JSON. Documents in MongoDB are stored in the format of BSON. Here is a list of typically used data types supported by MongoDB: String − It is used to store the data. It should be UTF-8 valid. Integer − This data-type is used to store a numerical value. Depending on our server, Integer can be either of 32 bit or 64 bit. Boolean − To store a boolean (true/ false) value we use this type of data type. Double − Used for storing floating-point values. Arrays − This type of data-type is used for storing list or arrays. Timestamp - This type of data-type is used to check if an element has been modified or added. Min/ Max keys − We can use min or max data types for comparing the value against the lowest and highest BSON elements and vice-versa. Object − This data type stores embedded documents. (A document that contains another document in the form of the key-value pair) Null − This type of data-type is used by MongoDB to store a Null value. Symbol − It is not supported by a shell, but if it gets a symbol from the database, it is converted into a string. So it’s quite identical to a string data type. Regular expression − These MongoDB data types stores regular expressions in MongoDB. It maps directly to JavaScript Regular Expression. Date −  This type of data-type is used to store the date or time. We can also use our date or time by simply creating an object of Date and passing elements like day, month, year into it. Object ID − Mongo uses this type of datatype to store the document’s ID. Binary data − Typically used to store binary data. Mongo DB and Collections  A database can have multiple collections. A collection is a table that contains all your documents. We can create a collection as follows:  const collection = db.createCollection(name, options), or  const collection = db.collection(‘books’);     where, name is the connection name which can be anything, The option is a configuration document used for specifying the collection and is optional. We can list the following options while creating a collection: capped, autoIndexId, max, and size. createCollection() is an inbuilt method in MongoDB, which is used to create a new collection in database as shown above. Note: In MongoDB, a collection is never created until it gets some content!  db.collection('check', {strict:true}, function(err, collection) {});    So, this code will never create a collection until and unless you specify and insert it in the document.  ConclusionToday we learnt the basics of MongoDB, and how and why MongoDB is compatible with NodeJS. We also looked at how we can connect to our MongoDB database from NodeJS script, and found a cool demo of listing out the names of all the databases in our cluster. There are many activities that we can do with NodeJS in our database which involves the basic CRUD operations like insert, update, remove, or making a query in our collection.  And if you get stuck, see the official documentation of all of them here. It has plenty of features that make our job easier.  Happy Learning! :) 
10469
Introduction to Mongo DB

MongoDB, a highly scalable No-SQL database, is use... Read More

What Is Ethical Hacking?

The internet brought with it the third revolution; a revolution that has interconnected the world like never before. There are currently 5 billion internet users in the world. And this number only increases day on day. From education to healthcare to communications to transport, the internet has permeated every industry to make our lives easier and more convenient. But is the internet a manna from the heavens? Sadly not. While it has brought with it immense opportunities and innovations, it has also brought with it, threat; threat of breach, fraud and attacks. And foremost among these threats is the threat from hackers.  Hackers are sophisticated criminals who can breach cyber security systems and cause loss of money, credibility and trust. In 2017 alone, hacking cost people $172 billion, while it is predicted that by the end of 2020, the average cost of data breaches will be about 150 million. Apart from the money that is lost, a company that is vulnerable to cyber-attacks also loses face with its customers, making it unreliable. Which is why, to counter these attacks, more and more organizations today are investing in sophisticated cyber security, to protect their data and reputation from hackers.  But how does one know if the security they have in place is fool proof and not susceptible to cyber-attacks? This is where ethical hackers come in. An ethical hacker is a security professional who assesses a system for vulnerabilities that can be exploited for a malicious attack.  Ethical hackers break and build the security for an organization.  They have become an indispensable resource in the security market. Right from ecommerce websites to banks, all organizations are investing in ethical hackers who can assess and put a security system in place.    So, how does one become an ethical/white hat hacker? And what’s the career path in this role? Understanding Ethical HackingEthical Hacking is a legitimate and structured way of hacking, performed to expose the vulnerabilities in the software, web application, or in the network, that can be accessed and exploited by an unauthorized person. Ethical hacking helps secure both your personal as well as an organization’s IT assets.  There are many threat vectors which attackers use to get the access to a website, software or network. Ethical hackers are trained to identify these and fix them before they are discovered by malicious hackers. In organizations, they are often given the role of a security analyst, security consultant security architect etc.  Some of the tasks of an ethical hacker include: Detecting loopholes in a database that can be exploited by any unauthorized person  Finding vulnerabilities in networks that can be exploited by any attacker Educating the employees on how to identify phishing mails and tackle them  Establishing proper security controls on all the devices. Securing your Web applications and websites Securing your organization's network  Regular patching of Infrastructure devices like routers, switches, firewall and servers. Establishing perimeter security to protect the organizational network. Ensuring User and Access based controls are setup and implemented.  Input validation on Websites. Security analyst, security consultant or security architect...these are some of the names given to ethical hackers in the corporate world.What Ethical Hackers Do In essence an ethical hacker uses the same tools and techniques that would be used by a malicious or black hat hacker to breach a system. The only difference is that what an ethical hacker does is legitimate, ethical and with the consent of the organization quite contrary to a malicious hacker who hacks a system’s security without user consent.An ethical hacker’s job involves identifying loopholes and developing and discussing their assessment methods and findings with various IT team and  the higher management.  Ethical hackers perform vulnerability assessment on the network, software, and servers. Later they fix those incompetencies so that no unauthorized user can compromise the system’s integrity. What qualifications does one need to become an Ethical Hacker?A Computer Science or Information Technology degree is not required to become an ethical hacker. There are many professionals who come from non-technical background and go on to become excellent ethical hackers. What you need is expertise on the latest hacking tools and techniques that you can use to test the system and identify its loopholes.   Some of the defensive approaches ethical hackers use to protect organizations include:  Regular patching of Infrastructure devices like routers, switches, firewall and servers. Establishing perimeter security to protect the organizational network. Ensuring User and Access based controls are setup and implemented.  Input validation on Websites.  And many more.History of Ethical Hacking:- The term ‘hacker’ was coined in 1960 at Massachusetts Institute of Technology where some great minds were trying to redevelop mainframe systems using FORTRAN programming. With the dawn of the digital age, hacking became one of the top methods of conducting cyber-attacks. Nation sponsored attacks are a new form of cyber terrorism that can bring countries to their knees.   One of the biggest examples is Stuxnet; a virus attack on the Nuclear program of Iran, which according to Wikipedia was carried out jointly by USA and Israel. Some of the other victims of hacking are organizations such as: Adobe hack: 2013 Yahoo Hack: 2013 eBay hack: 2014 Sony hack: 2014 Mariott hack: 2018 Dubsmash hack: 2019 Evolution of the Ethical Hacking role:Ethical hackers play an important role in securing us in this era, and can be said to be the unsung heroes of the IT industry.  Organizations have greatly expanded the investments made on cyber security after realizing that a breach could cost them more than their turnover. The digital demand in today’s world has ensured that the responsibilities of and the need for ethical hackers is on the rise.  How does Hacking become Ethical? Hacking can be legal or illegal depending on the intention of the act. If hackers use their knowledge for providing security and protection to any organization, it becomes legal or ethical. When a hacker has the user’s consent to check the security of their system by breaching the system, it is ethical hacking. However, if the security of a system is breached without the user’s consent to perform a malicious act such as stealing passwords, sending spam, damaging/stealing data, making unlawful transactions etc, then that makes it a cybercrime.   Recent Hacking Attacks:- What do hackers do? Perform a data breach Get details of the Server Get sensitive details from a database Crash a website Some of the more prominent attacks of data breach in recent years include In 2015, Barack Obama, Joe Biden, Jeff Bezos, Waren Buffet, Bill Gates, Mike Bloomberg, Elon Musk, Kanye West, and others were victims of hacking.  Myerscough College, in Billsborrow, Lancashire was attacked by an attacker on their result day. This compelled the staff to email each student about their grades, individually, Even their online enrolment system was affected by the attack.  A ransomware Wannacry, was used to derail thousands of computer systems including those of Government organizations and private organizations.  Ashley Madison is a website with the slogan 'Life Is Short, Have an Affair.' This website was attacked by attackers in July 2015, which resulted in the personal data of 37 million users being leaked on public websites. The results were catastrophic and it ruined the reputations and marriages of many. In June 2015, the records of 21.5 million people, including social security numbers, dates of birth, addresses, fingerprints, and security-clearance-related information, were stolen from the United States Office of Personnel Management (OPM). Most of the victims are employees of the United States government. This attack was also considered to be serious due to the leak of private information of the officials. The attackers used asymmetric cryptography, in which they encrypted the complete system using a public key and stored the private key on their own server. The owner of the system was blackmailed into giving money in exchange for the private key to decrypt that system.  According to McAfee "Rise in Cyber Attacks Amid Covid-19 Resulted in 375 Threats Per Minute in Q1 2020" What is Vulnerability: - Vulnerability is a loophole in the system which allows any unauthorized user to get access into the system.  Vulnerability is often a result of misconfiguration of the logic which is implemented for operation or security of the system. Any weakness in a system that can be used to exploit the organization's property is called vulnerability. A flaw in the system makes it vulnerable to attacks. A small configuration error can become a high-level vulnerability.  Generally, vulnerabilities are categorized according to the severity and frequency of occurrence. These are:  Critical  High Medium Low Below are some of the different types of vulnerability: If Database default credentials are used If Server is not properly patched  If Session time out is not properly configured If Server is executing data entered in input field as a command If handling of data is not properly implemented.What types of Systems do Hackers target?Hackers often want to hack those computers or networks from which they know that they will surely get some valuable/sensitive information. Government and Private organizations that store large amounts of sensitive data are especially vulnerable to hacking. Individual hacking is also on the rise were hackers attack individuals to steal money or passwords. In the times we live, knowledge of hacking and security is a must for every individual and organization to protect themselves.  Ethical hackers are the modern-day vigilantes who protect and serve organizations and individuals by fixing security issues of systems and keeping them safe from attacks. 
7324
What Is Ethical Hacking?

The internet brought with it the third revolutio... Read More

What Is React-js State?

You must have already learned about the basic building block of any React application which is a Component.  A component represents a feature that may be made up of several smaller components. Components can be broadly classified into functional or class components.  Components may take in some values as properties (prop) to render a page. These props decide how to render a page. function Welcome(props) {   return < h1 >Hello, {props.name}; }In addition to props, a component can also have a state that holds a value that can keep a track of all the information within a component. In this article, we will focus mainly on what is State, how we can define and utilize State and how components can use it in data management.  Defining React StateSo what exactly is state? What is it used for?    State represents a component’s underlying data model and is rendered by the component. But more importantly, whenever data in the state changes, it causes the component to re-render to reflect the change. This facilitates declarative programming where you can simply manipulate state; while React takes care of implementing updates to ensure your component reflects the data in the State accurately.  In Class component we can use State as follows:  class Welcome extends React.Component {     constructor() {         super();         // Space To define the state         this.state = {            isDisabled: false,            totalCost: 0,            products: []         }     }     // To Define render method  } We can also use state in Functional components using the useState Hook. Hooks are a new addition in React 16.8 which let us use State and other React features in functional components.  When should I use a Hook?If you are writing a functional component and realize that you need to add a State to it, the only option previously was to convert it to a class. Now you can use a Hook inside the existing function component.  For this, you can directly read the React documentation of Hooks here. In this article, we will mainly focus on “what is a State” and how is it different from Props. Difference of Props and State Most of the developers who are new to React often think about when to use State and when to use a Prop. Let’s understand this dilemma with an example.   A React component is akin to a JavaScript function.  A State can only be utilized in class components natively and is quite similar to a Prop, with the only exception that it is fully private, which means it can only be fully controlled and accessed by a component. In functional components, you have to opt-in to the useState hook to include stateful features.  Props, on the other hand, allow you to reuse the component by giving it an ability to receive data as input from the parent component.   We will learn more about the State and its usage later in this article, but here is the practical difference between the two:  A fictional example of Using a State: class MyComponent extends React.Component {     state = {         name: 'Tom'  //defining the name property inside component state     }     render() {         return Hello {this.state.name};     }  }  Here, we can use the state ‘name’ anywhere in the component named “MyComponent” with the value ‘Tom’, or we can assign a new state also in the same component. And, Using a Prop:A Prop is a short name for properties. React is nothing without a Prop. Earlier we saw an example where we used the same data over and over again, but what if we have a scenario where we need the same component but not the same data? For example, I might want the theme component, but instead of a dark theme, I would like to use a light theme! What I mean here is that basically, I want to re-use “MyComponent” again, but not the data defined in it. This is where Props will come in useful; in cases when we want to change the content inside the reusable component.     class ThemeProvider extends React.Component {     render() {         return Current theme is {this.props.theme};     }    }  // when re-using the component with differnt data                It’s absolutely fine if you are not familiar with this code snippet. The idea is to understand when to use state or prop, and not the code as of now!  For now, just know that Prop is just a state, which is passed from parent to child. And because props can’t change their value in the child component, they take the help of an event listener or callback function in the parent component.    Now let’s quickly jump into the basics of a State.    Creating the State Object  React component has a built-in state object. Before you think that state is a very simple concept, let me stop you right there!  It’s not!  You should not forget the data flow in React! In React there is a uni-direction flow of data, which is from parent to child. This can be a bit confusing, in that different components will never know what is changing in their component and when. Besides, they might be unaware of whether a component is stateless or stateful.   This is why the state is usually said to be encapsulated or having a local scope.This is why the state is usually said to be encapsulated or having a local scope. And therefore, you initialize the state in the class component by simply using a constructor.    Inside the Constructor  To declare a local state in the component, we can use a constructor as follows:   class Welcome extends React.Component {     constructor() {         super();         this.state = {             name: 'Michael Jackson',             currentTimer: 0,             hasPicked: false,             themeRed: false,             todoList: []         }     }     render() {         return My name is {this.state.name};     }  }    And the output or the result of the above < p> tag will be rendered as:     Hello, my name is Michael Jackson However, this was the older convention of declaring a state. We can also declare a state without the ‘constructor’ and ‘super’ keywords with the help of Property Initializer which came in 2017.    Wait, what is Property Initializer?     If you have a lot of code, it becomes harder to understand what is what. And if there are any arguments in the constructor, then it becomes an extra overhead to keep track of all of them.      Therefore, the idea behind using an Initializer is to use a cleaner ES6 component, by assigning an arrow function to a property that will act like a normal method. In other words, it can also be termed as class field syntax.         Without the Constructor       Take a look at the representation below:         class Welcome extends React.Component {  state = {       name: 'Michael Jackson'     }  }  render() {    …  }  }  In the following example, we have added a state to the “Welcome” component.         Let’s see how we can consume the data from the object — not outside the component, but within it!           Rendering data from state                 A state is either initialized in the constructor or by using the class fields syntax to directly initialize it in a class component. Now let’s see how we can consume the state from the component in the render.           A point to note here while using state is we use “this.state” to get the value of the name property and it can be accessed in the render() method as follows:             ~~~Wrong Approach~~~  class Welcome extends React.Component {     constructor() {         super();         this.state = {             name: 'Michael Jackson'         }     }     render() {         const { name } = this.state         return < h1 >My name is {name};     }  } or an alternative to the above is:  ~~~Right Approach~~~ class Welcome extends React.Component {  constructor() {     super();     this.state = {       name: 'Michael Jackson'     }  }  render() {    return < h1 >My name is { this.state.name };  }  } The only difference in both is that in the first snippet I used State as:  const { name } = this.state  But we have already initialized the state in the constructor, why should we do it again?  We should not reassign it, and hence we should never update the component state directly.  A state should always be accessed using this.state.propertyName.  Updating the State So far, we have seen how to create state and use state in the component.      Now let’s understand why and how to update state and what happens after updating a state.           A state can’t be changed directly and the only permissible way of updating it is by using setState as follows:             this.state.site = "Welcome"; // wrong implementation    this.setState({ // correct implementation     site: "Welcome"  });    // Or  this.setState((prevState, props) => ({ site: "Welcome" })))  The setState( ) method makes the component re-render; and hence when a state changes the component re-renders and updates the changes.   Each time setState is called, it sends a request to React to update and re-render and give it back a newly updated state.   Let’s understand this with an example:  Let’s suppose we have a component and want to change the name in the component with a method called handleNameChange(). It should look as follows:          handleNameChange(name) {     this.setState({ name })  }   The above method receives an argument and it uses that argument to update the state.              Component Demo to update a state should look as follows:             class App extends React.Component {     constructor() {         super()         this.state = { name: 'Michael Jackson' }     }     handleNameChange(name) {         this.setState({ name })     }     render() {         const { name } = this.state         return (                              < div>                     < input                         type="text"                         value={this.state.name}                         onChange={event => this.handleNameChange(event.target.value)}                     />                                  My name is, {name}                      )     }  }  When is setState asynchronous?React doesn’t have just one job to do, or only one component to observe for. It is possible that different components will be asking for different updates and DOM manipulations at the same time, hence the state updates are merged!      When setState() is called, React merges the object provided into the current state object.            For example, if we have different variables in our state like this:           constructor(props) {     super(props);     this.state = {         likes: [],         names: []     };  }  And both states can be independently updated by using setState() calls as follow:componentDidMount() {     fetchLikes().then(response => {         this.setState({             likes: response.likes         });     });       fetchNames().then(response => {         this.setState({             names: response.names         });     });  }  Here we are calling multiple setState during one update cycle, so this.setState({names}) will leave this.state.likes unmarked but will completely replace this.state.names.  Hence you will not get the recently updated data in {names} and previous changes will be lost.  A quick fix to the above problem is as follows: Instead of giving a new state directly we can provide a function that can automatically provide the current state into a new state. There are two approaches to this:  // Method #1  this.setState({ foo: this.state.counter + 1 }, this.anyCallback);  Or              // Method #2  this.setState((prevState) => { return { counter: prevState.counterfoo + 1 } }, this.anyCallback);  The main difference is that in example #1, the counter gets incremented by 1 based on the state at the time when you have called the setState() method, whereas In the example-2, the counter will be incremented by 1 only depending on the value that the previous state had while the arrow function was called.  So if we have multiple setState() which happen at the same time before the actual state update, it is possible that they may conflict or have outdated state data, but if we go with approach #2 they are guaranteed to have the most recent updated state because they update synchronously! To learn more about setState() and its powers, head over to this official link.Bonus Section:  Changing Title on Click Example Using StateSo far you have understood how to use State in React and what are the basic principles that define when to use State and when to use Prop. Here is a simple Demo for using State in a component and using Props to reuse the component.    Try this code to understand the power of State and reusable components.         let imgLogo = 'https://apod.nasa.gov/apod/image/2009/CrabNebula_Hubble_960.jpg';    class BonusExample extends React.Component {      constructor() {          super();          this.state = {              newTitle: false          };          this.changeTitle = this.changeTitle.bind(this);      }      changeTitle() {          this.setState({              newTitle: !this.state.newTitle          });      }      render() {          let title = this.state.newTitle ? 'Here is my New Title - Google Page' : 'Here is my Old Title - Facebook Page';          let link;          if (this.state.newTitle) {              link = ;          } else {              link = ;          }          return (              < div>                                                          {link}                                                < button style={{ margin: '20px' }} type="button" className="btn btn-primary" onClick={this.changeTitle}>Change Name                                                          < HelperComponent />                        );      }  }    class OldPageLink extends React.Component {      render() {          return (                                http: //www.facebook.com                        );      }  }    class NewPageLink extends React.Component {      render() {          return (                                http: //www.google.com                        );      }  }    class Header extends React.Component {      render() {          return (                                {this.props.children}                        );      }  }    class Main extends React.Component {      render() {          return (                                {this.props.title}                  {this.props.children}                        );      }  }    class Footer extends React.Component {      render() {          return (                                {this.props.children}                        );      }  }    class LogoComponent extends React.Component {      render() {          return (                        );      }  }    class HelperComponent extends React.Component {      render() {          return (              Changing the title from one to Another          );      }  }    ReactDOM.render(, document.getElementById('example'));  Conclusion       I hope you have understood the concept of State and its usage. We have learned the basic difference between State and Props and when each should be used. We have also understood the data flow in a React component and how to consume and update a State object in React.  Now that you have understood all the fundamentals of State, there are some high-level pointers that you should always keep in mind while using a State. State is private to a component State Updates have shallow merging You should never modify a State Directly Updates in a State may Be asynchronous State is only used when you want to change component dataWe hope you have found this article useful. Happy Learning!   
10469
What Is React-js State?

You must have already learned about the basic buil... Read More

Who Should Get CSPO® Certified?

In this article you would learn who is a Product Owner, and what are their roles and responsibilities while playing the role of a PO on a Scrum project. You would also learn about the CSPO® certification and its prerequisites, who all can attend the CSPO certification training and why should a PO get CSPO certified.  Who is a Product Owner?A product owner in Scrum is one of the three core roles and responsible for maximizing the value of the products and the work of the Scrum development team. This is a one-person role and is a bridge between the end-user and the development team. On the project, a PO plays different roles such as business strategist, product manager, product designer, market analyst, customer liaising and rarely Scrum Master. He or she has to be well versed with Agile/Scrum methodology.  What are the PO’s roles and responsibilities on a Scrum project? 1. Developing and maintaining a Vision and a product roadmapThe Scrum product owner is the point of contact on the product development team and uses a high-level perspective to define goals and creates a vision for the project. The PO is responsible for communicating with all stakeholders including customers, end-users and the development team to make sure that the goals are clear, and the vision is aligned with business objectives. This ensures that the team maintains a cohesive vision.The PO is also responsible for creating a product roadmap for the Scrum project. This product roadmap is a high-level, strategic visual summary that outlines the vision and direction for the product offering over time and acts as a strategic guide for stakeholders to reference and is also used as an execution plan.2. Ordering and managing the product backlogThe development team’s to-do list and one of the most important responsibilities for a Scrum Product Owner is managing the product backlog throughout the project.  Based on the overall strategy and business objectives the product owners create the list of backlog items and prioritize them. They will also need to map out project dependencies with the required sequence of development. The product backlog is a live document which is continually updated based on evolving project needs throughout development. Because it gets updated frequently, the product owner must make it accessible and available to all stakeholders, specifically the development team, to ensure optimized performance and project outcomes. 3. Overseeing development stagesWith the vision, product roadmap and product priorities set, the product owner should spend a significant amount of time overseeing the actual development of the product. They are a key contributor throughout each Sprint event including Sprint Planning, Backlog refinement, Sprint Review and Sprint Retrospective. During the planning stages, the product owner works with end-users to identify high-value items from the Product Backlog so that these items can be considered for the next Sprint or Iteration. At the end of every Sprint they will meet with the team to refine the process, identify areas for improvement and plan for the next sprint. 4. Anticipating and Prioritizing client needsThe Scrum Product Owner will be an expert at judging and anticipating the client’s needs to effectively manage the project and deliver a high-value product which can be used by everyone in the organization.5. Acting as primary liaisonThe product owner acts a link and is the primary communicator between the end-users and the development teams. They must be expert communicators, ensuring there’s buy-in from end-users on all major decisions strategically with clear instructions on deliverables for the developers.  6. Evaluating product progress at each iterationThe product owner is held accountable for each stage of the development process and the final product. They also take a prominent role in inspecting and evaluating product progress through each Sprint. The product owner is the one who makes the judgment call on the team's performance and decides if the team need to go back to the drawing board or they can move on to the next Sprint or next steps. A Product Owner is also responsible for defining high-level stories and should possess good decision-making and interpersonal skills while working on a Scrum project. What is a CSPO® certification?  CSPO stands for Certified Scrum Product Owner. It is an industry recognized certification for Product Owners who are already in the role of a Product Owner, or novices who would like to understand the insights of a Product Owner role.  After attending the training, each attendee would have the necessary knowledge to play the role of a PO on any Scrum project.  What are the pre-requisites to become a CSPO®? There are no specific prerequisites to attend a CSPO certification training course.Who can attend the CSPO® training? CSPO training can be attended by anybody who is knowledgeable and confident about the product under consideration, who is very good in communication, who is a good listener, who is focused on product development and who can quickly resolve issues and take decisions. Before selecting a person to attend the CSPO training and later play the role of a Product Owner it is always advisable to estimate the time and effort required for the Product Owner role. The estimates will come handy when the person who wishes to play the role is made aware of the period of time for which they are required to be available for the Scrum project. Suggested target audience could be – Business Analyst: Business Analysts are better suited to play the role of a Product Owner as they have the required knowledge on how to handle the business requirements and supplement it with business analysis. They play a critical role in decision-making during business analysis. Project Manager or Manager:  Project Manager is another role that is available to a Product Owner. Project Managers are involved in project planning and executing of a project i.e. throughout the lifecycle of a project right from ideation to closure. Hence, they would be more effective on a Scrum project to play the role of Product Owner.  In many organizations the Business Analyst also plays the role of Project Manager. It is for this reason that many organizations prefer Project Managers to play the role of a Product Owner. If these Project Managers have a Certified ScrumMaster certification then it would add value. Product Manager: Product Managers make very good Product Owners, as they have all the necessary knowledge about the product requirements based on strategic requirements and current market trends. If the Product Manager has Business Analysis experience, then this can add tremendous value to the Scrum project if he or she is appointed to play the role of a Product Owner. Functional Managers: Many organizations are structured by Functions and the Functional Managers report to the CEO. Functional Managers from any function would also be ideal to play the role of a Product Owner as they already have the necessary knowledge about the product, strategy and market trends. They understand the business requirements and they have been working with other functions during business as usual. They would also add value to the Product Owner role. Chief Executive Officer (CEO): CEOs can be very good Product Owners as they would be having first-hand and complete information about the product, strategy and market trends. The CEO’s experience would be an asset to the Scrum project as they would be constantly thinking about how to achieve a high return on investment, how to engage the customers throughout the Scrum project, etc. All these qualities are already part of the CEO’s roles and responsibilities.  Every individual needs to decide, if they think certifications add value to their career. Certifications are proof of their achievement. Ultimately, it would be their expertise on the job, along with hands-on experience to play the role that matters for career advancement. Individuals can take up a Product Owner certification  To gain knowledge and understanding of the role To refresh their knowledge and get to know the responsibilities and best practices employed by a Product Owner. Why should a PO get certified?    The industry is looking out for Certified Product Owners who can take up the role of a Product Owner in their organizations. The certification is a proof of your achievement, the knowledge you have gained and demonstrates that you would be able to work effectively throughout the Scrum project.  If you are a CSPO certified, your potential employers will be assured that you are the right person for handling the job and the project is in the safe hands.  How can you get CSPO certification?  Attend a live online or classroom course taught by a Certified Scrum Trainer® (CST®), or receive private coaching from a Certified Agile Coach (CAC) in order to get the necessary knowledge and skills to be a successful PO.   Please note, classroom course offers an added value as a lot of doubts can get cleared during the training sessions. If you have attended a training conducted by a Scrum Alliance CST, then on successfully completing the course, you will be asked to accept the CSPO License Agreement and complete your Scrum Alliance membership profile.ConclusionIn this article you learnt who is a Product Owner, and the roles and responsibilities of a PO on a Scrum project. You understood more about CSPO certification and its prerequisites and why a PO should get CSPO certified. You also got to know who all can attend and benefit from the CSPO training.    
9874
Who Should Get CSPO® Certified?

In this article you would learn who is a Product ... Read More