Where devs, technology professionals, and leaders go for news, tips, videos and more

Latest Posts

What Is a React Component? Write Your First React Component

By Pavan kumar

Prior to ReactJS, Popular frameworks like Angular and Ember were focused more towards model/view/controller like patterns known as MVC. These frameworks tried to provide morefunctionalities and solve most front-end development problems. ReactJS, however, chose to follow a different path, focusing primarily on views and how we can efficiently render views, thus popularising Component-based Architecture in web development. I wouldn’t go so far as to say the creators of ReactJS invented theComponent-based Architecture pattern,but for sure they saw its benefits andhelpedpopularize this pattern for web development. But first, what is Component-based Architecture? Component-based Architecture In web development, Final output is a fully functional UI. According to component-based architecture, we should see the complete UI as a combination of multiple smaller, reusable, composable, functional components and we should approach the problem in similar fashion. We should build multiple small, composable, functional components which can work together as a complete solution. What is component? So we understand that in component based architecture, we are supposed to build plenty of smaller components. But what is a component and how does it look like? Word "component" in software industry means a software package, a service or any module which encapsulate a set of related functionalities. In context of UI development, a component means a UI element or a collection of UI elements which together provide some set of functionality. A component could be as small and simple as a heading component which is builtwith single H1 tag and its text or it could be as complex as accordion or tabbed navigation. ReactJS also encourages web developers to build smaller, reusable, composable components. Benefits of using Component Architecture There are lot of discussions about the benefits of using Component Architecture. Some people feel that if we break down the UI in multiple components interacting with each other then the code base will have too many components and will eventually make the project un-maintainable. But still, this architecture has following benefits: Reusability: It would always be great to avoid writing new code as much as we can and use the existing well tested functionalities. If we have collection of well tested reusable components then definitely, the overall output would be more robust. Faster Development: Reusing the same set of componentswill eventually take less time to develop a functionality. Composability: A big functionality is nothing but a collection of multiple small functionalities. Similarly, it is simpler to build a bigger functionality efficiently if we can compose multiple small components together. Less Maintainability: More reusabilitymeans less code and less code will always lead to less maintenance of code base. React Components React component is basically a collection of one or many UI elements which renders a complete functionality. It can show different behaviours based on different parameters. In ReactJS, these parameters are knownas state of component and props passed to component. So how does a React component looks like? A very simple components looks something like this:import React from "react"; function Greeting({ name }) { return {`Hello ${name}`}; } ReactDOM.render(, document.getElementById("root"));Hmmm, But is not recognised by web browsers so won't it throw an error? Above code uses JSX (Syntax extension for JavaScript) and there are tools which actually converts JSX into something understandable by JavaScript engines of web browsers. JSX JSX is a library which allows us to write HTML (or XML) like syntax in JavaScriptfile. Then this code goes through a tool which converts it into something understandable by JavaScript engines. It allows us to write HTML in JS. It gives a syntax { }, inside curly bracket, we can write JS code. But still how does the final React component looks like? Below code snippet is a final conversion of above Greeting component. import React from "react"; function Greeting({ name }) { return React.createElement("h1", null, `Hello ${name}`); } ReactDOM.render( React.createElement("Greeting", { name: "Gully Boy" }, null), document.getElementById("root") ); React.createElement is part of React API which actually defines a React element. This data structure will be used by React to render the DOM element later. So now, we understand the need of JSX and benefits of using JSX, We will be usingReact components using JSX in rest of the article. Classification of React Components Based on Interactivity Before going into the classification, we need to understand what a state means in React component. state is information that a component itself maintains and which changes with time. The state affects the UI and/or the behaviour of the component. There are two types of components based on interactivity: Stateless Component: When a React componentdoesn't have its own state and it just renders based on the information passed to component (props) or a hardcoded information within the component then such components are called as stateless component. Such type of component doesn't provide any user interactivity with component. For Ex: above Greeting component is a stateless component as it just renders the information (in this case name props) passed to it. Stateful Component: There is other type of component which possesses state. This means based of the state behaviour of component changes. These types of components are known as stateful components. For Example a counter component below:import React, {useState} from 'react'; function Counter() { const [value, setValue] = useState(0); const increment = () => { setValue(value + 1); } const decrement = () => { setValue(value - 1); } return ( Decrement {value} Decrement ); } export default Counter;Counter component has a state value which changes when user clicks on increment or decrement button. there is a span tag which displays the state value and it also gets updated based on user action. So this component is an example of stateful component. Based on Programming Methodology There are two type of components based on Programming Methodology Class based Component: A React component can be JavaScript class which implements render method of ReactJS and extends React.Component class. Generally if a component has any state or need to implement any React lifecycle method then we create a class based component. Class based componentmust implement the render lifecycle method which returns the JSX. Stateless component can also be implemented as class based component. For example, Above component can be implemented as class based component like below: import React from 'react'; class Greeting extends React.Component { constructor(props) { super(props); } render() { return {`Hello ${this.props.name}`}; } } export default Greeting; Functional Component: A React component can be JavaScript function which returns JSX. Before Hooks which means before React v16.8, functional component was used only for building stateless component. Functional component takes props as argument and returns JSX. Writing functional code is always better in comparison to class based component because transpiled code for functional component is always shorter than class based component. For example, First implementation of at the top is functional component. Based on Functionality There are two types of components categorised based on functionality. One typeimplementsbusiness logic and the other type is more inclined towards UI. Presentational Component: React components which decide the look and feel of UI are called presentational component. These components can be stateful or stateless components. State of these components are normally UI level state instead of application (business logic) state. These components are reusable and often used to have independent styles. For example: above Greeting component is a presentational component which can we be reused multiple places in application. Container Component: React component which mainly deals with application level state, rarely contains HTML tags and interact with API data are known as container component. This categorisation is basically separation of UI logic and application logic. Component and its lifecycle In React JS, class based components are extended from React.Component class which provides several lifecycle methods to component. render is also a life cycle method which must be implemented in React component. Other lifecycle methods are optional and can be used to gain more control over the React component. As ReactJS has evolved with time, few lifecycle methods are no longer supported and will be removed from library in coming update. In this article, we will look into the lifecycle methods which are supported by library version 16.4+.React lifecycleReact lifecycle: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ To understand component's lifecycle methods and their invocation orders, we can divide all the methods in three broad category: Mounting, Updating, Unmounting Mounting: When component mounts then first of all constructor method (if present) is called. constructor method takes props as argument and pass props to the constructor method of React.Component class. Refer the example of class based component above. then getDerivedStateFromProps static method will be invoked. getDerivedStateFromProps takes two argument - props and state and returns an object to update the state or returns null to update nothing. This lifecycle method is used when the state is depends on props. After getDerivedStateFromProps method, render method is being called which returns the JSX. After render, componentDidMount is called which is the last method in mounting phase. We normally put API calls in componentDidMount lifecycle method. To summaries the mounting of component: constructor constructor(props) { super(props); // code here }getDerivedState From Props static getDerivedStateFromProps(props, state) { // code here // return updated state object or null } render render() { // code here } componentDidMount componentDidMount() { // code here } Updating: After a component is mounted, A React component is changed either when the state of component or props passed is changed. on update, first getDerivedStateFromPropsstatic method is called which returns the object to update the state or return null to update nothing. Then shouldComponentUpdate lifecycle method is called which takes two arguments (nextProps and nextState) and return a boolean. This method decides whether render method should be invoked or not. If this method returnstrue then render method will be invoked otherwise component will not get updated. This method is used to optimise the React component by reducing the number of re-renders. if shouldComponentUpdate return true (which is also the default return value of method) then render method will be invoked which updated the component based on updated state or new props. After render method getSnapshotBeforeUpdate method is called. this method is invoked right before the rendered output is committed to DOM. It takes two arguments prevProps and prevState. this method gives access to DOM before React is going to update it with recent changes. For example, you can access last scroll position before update (re-render). Value returned by getSnapshotBeforeUpdate will be passed to componentDidUpdate method which is the next lifecycle method invoked. componentDidUpdate is called right after update occurs. This method takes three arguments prevProps, prevState and snapshot. last argument snapshot will be the value returned from getSnapshotBeforeUpdate lifecycle method. To summarise update phase of component: getDerivedState From Props static getDerivedStateFromProps(props, state) { // code here // returns updated state object or null } should Component Update shouldComponentUpdate(prevProps, prevState) { // code here // returns true to re-render the component otherwise return false. // default is true } render render() { // code here } getSnapshot Before Update getSnapshotBeforeUpdate(prevProps, prevState) { // code here } component Did Update componentDidUpdate(prevProps, preState, snapshot) { // code here } Unmounting: Last phase of React component is unmount. it invokes the last method of React component's lifecycle componentWillUnmount. this method is called before the component is unmounted and destroyed. Normally, clean up code is put in componentWillUnmount method. we should not call setState method here as component is never going to be re-rendered after unmount. To summarise: componentWillUnmount componentWillUnmount() { // code here }Set up a React project As JavaScript has evolved and tooling has become an essential part of web development. There are many approaches to start a React project but the most popular one is create-react-app (popularly known as CRA). create-react-app is available as NPM module which means to use CRA, one must have NodeJS and NPM installed on machine. Create React project with CRA First check the NodeJS and NPM installation on machine by executing following command: node --version npm --version npx –version In case NodeJS is not install then download and install it from https://nodejs.org/en/. Once it is confirmed that NodeJS and NPM is installed on system then execute following command to create a React project: npx create-react-app My First React Project NPX command comes with NPM. It is used to use any NPM without actually installing the NPM. above command will create a new React project with latest version of create-react-app in your current directory. Execute following command to run the project: cd My First React Project npm start This would start a local server at port number 3000 and open default React page in browser. Understanding project generated by CRAAbove image shows the files and folder generated by CRA. let us go through it and understand: package.json: This file contains NPM dependencies, NPM scripts, project name, version etc... public folder: All public assets will be present in public folder like index.html, image or logo etc... src folder: All our JS code including React components will be present in src folder. CRA configured our React project with all the needed tooling required for web development. It configured Webpack, dev server with hot reload ( on file save browser reloads the page to reflect latest change), Eslint, react-testing-library for unit testing React components etc... src/index.js is the starting point of our React project. Project also has one sample React component App.js. You can make changes to App.js and it will be reflected on browser. What type of React Component should I build in 2020 So far we have learnt different ways of writing React component. Now it is time to choose which pattern should you choose for writing React components. As we have discussed in previous article that ReactJS is moving towards functional programming paradigm and with the introduction of hooks in version 16.8, Writing functional component fulfils most of our use cases. Let's create our first stateful functional component. We will be building a simple counter component. The final output looks like this: Counter component code: import React, { useState } from "react"; import "./Counter.css"; function Counter() { const [count, setCount] = useState(0); const increment = () => { const updatedCount = count + 1; setCount(updatedCount); }; const decrement = () => { const updatedCount = count - 1; setCount(updatedCount); }; return ( - {count} + ); } export default Counter; Styles are added in Counter.css .counterContainer { background-color: #fff; font-size: 24px; font-weight: 500; border: 1px solid #0874ce; border-radius: 3px; box-shadow: 1px 1px 4px 0 #0084ff; } .counterContainer button { outline: none; border: none; width: 50px; height: 40px; background-color: transparent; font-size: 24px; font-weight: 500; cursor: pointer; } .counterContainer span { color: #0084ff; } We have created a fully functional counter component which can be used anywhere in React application.

Rated 4.0/5 based on 15 customer reviews

What Is a React Component? Write Your First React Component

Blogs

6708

What Is a React Component? Write Your First React ...

by Pavan kumar
08 Aug 2020
8 mins read

Prior to ReactJS, Popular frameworks like Angular ... Read More

Overview of Modules in Node.js

By KnowledgeHut

Node.js is an open source server-side runtime environment which runs on various platforms like Windows, Linux, Unix and other operating systems. Node.js is built on JavaScript engine and provides ability to build scalable applications. The runtime environment is event-driven and provides asynchronous programming which is memory efficient.Node.js is useful in generating dynamic page contents as it eliminates the need for the wait to open and close files and continues with the next request. We can also use Node.js to modify data in our database. In other languages,it’susually better to structure our application code and break it into small pieces. However, in node.js, we can write all our application code in one index.js file, irrespective of the complexity of our application, and the node.js interpreter will not cause issues. But, if we have very complex application,it would be better to divide our application code into small modules and then combine them into a cohesiveapplication. Introduction to Node.js Modules Node.js modules are the different functions which can be reused time and time again. They can be organized into single or multiple JavaScript files in the same or different folders. Each file is treated as a single module. They can also be considered as JavaScript libraries. Every module has its own context and does not interfere in the working of another module. Together, these modules help to run the application. Before we deep dive into types of modules,let’s take a quick example of creating a simple module.const average = (a, b) => {return a + b;}; const output = average (2, 3)console.log(output)The above module will calculate the average of two numbers and display the output. Types of Node.js Modules Built-in Modules When we install node.js, several lightweight modules are automatically created, which provide bare minimum functionalities. These modules are compiled into the node.js binary. They are also referred to as core modules and located in the lib folder. Below are few of the built-in modules in node.js ModuleCommentsurlUsed for url parsing and resolutionpathIt is used to deal with file paths using methodsfsIt is needed to work with I/OutilIt includes utility functions needs by programmers.httpIt is used to create http server using classes, methods and events.These modules are used in our application code as reference. The code of these modules are not part of our program as they work as libraries. They are always loaded if their identifies is passed to require().Let’s see an example:var URL = require('url').URL;Here require(‘url’) is what gives us access to url module. The definition of url module is not seen to us. We just need to understand when and how to use it.Built-in functions have methods and classes which can be used when we require() the module.For example:var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end ('Welcome to Node.js Modules!'); }).listen(8080);Here, we use the http built in module using the require(‘http’). Once we load the http module, its classes and functions like createServer can also be used.External Modules Node.js has a huge open source community which really boosts its ecosystem. People from around the globe contribute to the node.js community, which provides access to various modules other than the built in modules. These modules are created to solve specific problems in specific environments and then open sourced for the benefit of others. Since these modules are not part of the library, they cannot be used directly using the require unless we first install the codebase containing the module locally; once this is done, they can be integrated to our codebase. External modules are also known as third party modules and require a package manager that maintains all the modules so that they can be accessed with ease. By default, node.js uses NPM [node package manager) package manager for JavaScript runtime environment. NPM is primarily used to install and maintain external modules in node.js application; we can install the external modules which are needed for the application using NPM. Custom Modules Built in and External modules are provided by others based on their needs. However, there might be cases where you need to build your own module for your application. Let’s create a module of our own named mydiffreturn Math.diff() * (max - min); } exports. between1and10 = function () { return getdiff (1, 10); };We will put this code in a separate file called mydiff.js which provides helper function that returns a difference of two numbers. This file can provide attributes to the outer world via exports, then index.js can use the exported functionality. Below is the content of index.jsvar mydiff = require('./mydiff.js'); console.log(mydiff.between1and10());require () will again come into play by making the attributes of local mydiff module available. Module can also allow hiding to hide the functionality of the module which is not needed outside of the module. This can be done simply by not exporting the functionality via exports. In such case even though we will have mydiff.js file specified in index.js it will not be able to access the non-exported function and fail with the following error. TypeError: mydiff.getdiff is not a functionThis way, we can keep our codebase more organized by hiding the implementation details in a module and exposing only those parts which will be used by other parts of the codebase.Module Caching When the modules are first loaded, they are cached. This means every call to the require () will get the same object returned for multiple calls if the call is resolved to the same file. This is an important feature as it allows us to load the transitive dependencies for returning partial objects. Module caching is done in an object in a key-value pair and then we can reference the objects using the cache (require.cache). If we delete any key from this object, then we need to reload the module on next require () call. Caching Modules also have some caveats as the modules are cached based on their filenames. If a module is resolved to a different filename based on the location of calling module it is not guaranteed that require () will always return the same object. Also, in case of different case-insensitive file systems, different resolved file systems points to the same file. In such a case, again, cache will treat them as separate which willresult in reloading the module multiple times. For example, require (‘. /mydiff’) and require (‘. / Mydiff’) would result in two different objects. Stateful & Stateless modules If a node.js module exposes an instance of some stateful object like db connection or socket etc., it is stateful module. Whereas, if a module exposes stateless entities like classes, methods etc., then it is known as stateless module. If an application codebase uses stateful module, we should followthe singleton pattern so that all other modules requiring stateful module access the same instance. Due to the concept of CommonJs system we don’t have to explicitly wrap our stateful module in Singleton pattern. The first time we use the module, it will be cached for the subsequent require as while caching, node.js uses instance package address as a key. Stateful modules should be used with more caution than stateless modules if used in the tightly coupled architecture. Module Dependencies Any component or piece of information that is needed for the working of the module is regarded as dependency, but the first thing that comes to mind while thinking about the dependencies of node.js is the content of the node_modules folder. From database connection instance to string with file path can be considered as dependency. In a broader classification, dependencies are divided as ‘hardcoded dependency’ and ‘injected dependency’. If you hardcode the name of the dependency inside the module using a require function in the wiring pattern, it is referred to as ‘hardcoded dependency’. If the name of dependency is instead provided as input by external entity, then it is known as ‘dependency injection’. Let’s see some differences between hardcoded dependency and dependency injection.Hardcoded DependencyDependency injectionThey are intuitive and easy to understand.Offer higher reusability.Easy to debug.Difficult to debug.Offer less flexibility as they are tightly coupled.Dependencies are wired at runtime.Unit testing is harder since dependencies are hardcoded.Unit testing is easyConclusion To understand how node.js modules work, we need to know the various functionalities it offers. With this objective in mind, we first looked at the different types of node.js modules. We then explored built in modules, looking at different types of modules and examinedwhat they offer and the advantages of having these modules. We then saw External modules and walked through how they can be included in our codebase, including how the module code could be hidden if we so wished. Finally, we saw custom modules, their benefits and how to use them effectively. We examined how modules can be cached in modules providing uswith performance gains by avoiding reload several times, while also going through some caveats we should be aware of. We also saw how modules can be stateful and stateless and where both can fit in. Finally, we explored the module dependencies and few differences between them which helps us choose among them as per the need of the application.

Rated 4.0/5 based on 15 customer reviews

Blogs

6515

Overview of Modules in Node.js

by KnowledgeHut
08 Aug 2020
8 mins read

Node.js is an open source server-side runtime envi... Read More

The ITIL Framework and It’s Processes

By KnowledgeHut

You’ve got ITIL® questions. We’ve got ITIL answers. Recently, a group of learners, due to complete their engineering degrees in computer science caught up with John Dell, one of our expert ITSM trainers and authors, seeking advice on careers in ITSM. This blog is an account of the conversation which will serve ITIL aspirants well. The learners opined that they were not very keen on programming and would like to explore what other options exist in the IT sector. They were about to graduate and were not sure there is much opportunity outside programming in IT. John clarified that firstly, the IT sector does not revolve only around software development. The IT industry is vast and presents plenty of opportunity. He suggested they start by carrying out a quick SWOT analysis for themselves. Majority of the learners cited that communication, good analytical and testing skills and leadership skills were their strengths;incidentally, coding and design were not particularly strengths for this group. The group recognized that IT support and the IT service industry would open up several opportunities, while programming and core software development were not areas that appealed to them. Based on this basic SWOT analysis, John suggested that the students considerjobs related to Service management. Jumping into whatITIL is all about and how it couldpropeltheir career. IT Management mainly involves Software Development & Management, IT Infrastructure Management, and IT Service Management. The ITILFramework refers to set of best practices, guidelines, methodologies designed by industry experts to align their IT Services with customer and business strategic goals. So, this framework provides uniform and consistent guidelines to all IT industries to define their IT Service Management processes. Why is there a need for a consistent framework? When asked whether each IT companycan come up with their own framework and design for IT service management, John answered that they actually can. He further elaborated with an illustration - Company A provides support to Company X and Company B provides support to Company Y. Here, A and B are Service providers and X and Y are service consumers. They have not adhered to any service management framework. Both service providers, A and B, have unknowingly made many mistakes and faced lots of challenges in providing support to their consumers, X and Y. After a couple of years, once the project is completed, A and B have not exchanged notes, nor learnt from each other’s mistakes. Six months down the line, B commits the samemistakes that A earlier had and vice versa. In such a scenario, would service consumers X and Y ever come back to A and B again? Not likely. When mistakes repeat,service consumersor customers will not be happy and may not return to with the project again. To avoid such a scenario, what such companies could do is to connect with each other and sharelessons. Such an initiative would avoid many bottlenecks and arrest many recurring challenges. John explained that companies, understanding the importance of consistent process, have embraced lessons from the industry and continually improvise their processes for better customer experience. While it may not be feasible to connect with every other company and collect their lessons and best practices in real time, not with standing that companies may or may not share that information, there is a need for a common forum or entityto collect best practices and lessons across the IT industry and formulate aframework. Such a framework formulated for the IT Service industry is called the ITIL framework. Why is this framework called ITIL? ITIL stands for Information Technology Infrastructure Library. When asked why it was referred to as a ‘Library’, John explained that it is a set of practices for Information Technology Service Management (ITSM) that focuses on aligning IT services with the needs of the business. As it is a set of practices best practices and lessons from the service industry, it is referred to as a “library”. Significance ofITILin theService Industry Johnwent on to explain that there were plenty of reasons for the ITIL framework: ITIL framework helps to align the IT solutions with business strategic goals It helps to set the realistic, achievable and predictable service goals It ensures efficient service delivery and improves customer satisfaction It reduces costs through improved utilization of resources It defines consistent IT roles and improves communication through standardized terminology It improves planning and continual improvement due to regular measurement and monitoring What is meant by continual improvement? John addressed the question with a use case: Company A is the Service Provider and Company X is the Service consumer. Company A and Company X are in legal contractual agreement. Company A agrees to provide N services to Company X for the next 2 years. One of the agreed services is to resolve all High priority incidents within 4 hours. After a year of experience, Company A (Service Provider) becomes very good knowledge in resolving incidents within 2 hours and this has been verified as well. Now, Company A (Service Provider) submits a proposal to Company X (Service Consumer) to improvise the High priority incident resolution time by 2 hours instead 4 hours. The contractual document is amended. Company X (Service consumer) agrees to pay an additional amount for the improvisation of service to Company A (Service Provider). This is a good example of continual improvement. Continual improvement results in improvising service will always increase the customer satisfaction index, says John. History of ITIL In the year 1989, the UK Government’s Central Computer and Telecommunications Agency (CCTA) developed the first version of ITIL to unite IT systems in an efficient and cost-effective way. Collecting best practices from all government agencies and private sector companies across Europe, the CCTA came up with an initial standard framework. ITIL soon grew to a 30-volume catalogue, providing a collection of all IT best practices that focused on and catered for client and business needs. In the year 2000, CCTA change into OGC (Office of Government Commerce, UK). The same year, Microsoft also adopted ITIL as the foundation for developing their Microsoft operations and framework (MOF). This version was focused on making ITIL more accessible and arranged the 30-volume framework into nine related categories. In the year 2007, ITIL was expanded and reorganized as an IT service management lifecycle, known as ITIL Version 3 (ITIL V3).  Thisversion covers the initial conception, development, transition, operations, and improvement of a service.  ITIL V3 views the activity of managing service as a lifecycle, which is a shift in focus from the individualized process/function view of the previous version.The service lifecycle concept has further evolved since. In the year 2011, AXELOS released a revision of ITIL that resolved errors and inconsistencies with V3. This is the updated version of the 2007, referred to as ITILv3 updated. In this version,the ITIL service lifecycle contains 5 stages: ITIL Service Strategy, ITIL Service Design, ITIL Service Transition, ITIL Service Operation and ITIL Continual Service Improvement. This forms the basis for all ITIL best practices across the globe. Since 2013, ITIL has been owned by AXELOS Ltd – a joint venture between Capita Plc and the British Government’s Cabinet Office. In the year 2019, due to the Industry 4.0 revolution, the current version of ITIL was launched. V4 has more practical guidance on how to use ITIL in an organization which embraces digital journey. This makes it easier for organizations to align ITIL with DevOps, Agile, and Lean work methods. With V4, ITIL adopted more of a holistic philosophy towards service management, making it broader and more inclusive for the modern IT environment. Having developed a good understanding of the evolution of ITIL, the students learnt about how the best practices which originated from a few European companieswere continuously improvised and revised tonow become a global acceptable Service management framework across the globe. How ITIL works The students now wanted to go deeper and asked how ITIL could help the organization to achieve its strategic goals. John explained that following ITIL practices helps organization achieve their strategic goals by: Ensuring quality of IT services meetsService consumer’s expectations and needs EnsuringService consumer can use IT services whenever and wherever they are needed Ensuring organizations can improve Customer satisfaction by building and maintaining positive business relationships Ensuring that organizations maximize value for money from their service providers Allowing organizations to benchmark their IT services and maximize ROI Allowing organizations to demonstrate and quantify the actual value of the services they provide Allowing organizations to forecast, influence, and respond to demand IT services in a cost-effective manner depending on fluctuating demand situations Allowing organizations to minimize IT service disruption Stages of ITIL and the purpose of each stage By now, the students were very keen and eager to know about the different lifecycle stages defined in ITIL V3 and its purpose. John went on to explain that ITIL has five stages. The following table helps explain each stage and its purpose:S.NoITIL StagesPurpose1Service StrategyThe Service Strategy stage provides guidance on how to design, develop, and implement IT Service Management. This is the core of the Service Lifecycle. This phase mainly focuses on understanding and defining the market. Also defines the needs of the customers2Service DesignIn the Service Design stage, strategies generated in Service Strategy stage are turned into action. Services and processes are designed, and plans are implemented to have a better service management.3Service TransitionThe Service Transition stage ensures that the new changes and modifications are efficiently incorporated in the service lifecycle without disrupting the other existing services or processes. It is carried out in a well-coordinated manner using cost-effective measures and resources. Through service transition, the design built is tested and implemented in the lifecycle in a productive manner4Service OperationThe Service Operation stage provides guidance on day-to-day business operations. The goal is for the IT department to keep things running smoothly, reliably, efficiently, and cost-effectively. The activities and processes in this phase ensure that services are delivered to customers at the agreed Service level agreement with minimal interruptions and disruptions. Service Operation focuses on providing value to both service consumer and the service provider.5Continual Service ImprovementThe Continual Service Improvement stage focus on improving the current service to the Service consumers. Continual Service improvement focus on progressive monitoring and controlling of services. Key performance indicators must be in place to determine whether the service is running optimally, and the service owner must ensure that the service complies with the strategic targets linked to the IT serviceJohn went on to explain that the outcomes of the Continual Service Improvement become the inputs for Service Strategy. Identified improvements will help to revise the strategic goals and targets. Explaining what was meant by Key Performance Indicator, John defined it as a quantifiable measurement for measuring any strategic goal. This is generally agreed between Service consumer and Service Customer in the legal contract, he added. The difference between ITIL®V3 and ITIL®4 Digging deeper into the difference between ITILv3 and ITIL4, John explained that ITIL4 was the latest version. The two may need to be prioritized depending on the case, he pointed out. S.NoITILv3ITIL41IT defines life cycle approachIt defines Service Value system-based approach2This version does not talk about 4-dimension model.This version emphasises the importance of 4-dimensions for a holistic service management.3ITIL V3, with its 26 service lifecycle processes, functions and other guidance arguably also describes how the components and activities in the organization work together.ITIL 4 and the Service value system take a more holistic approach, providing organizations with a flexible operating model that supports different work approaches. ITIL 4 presents 34 practices as "sets of organizational resources designed for performing work or accomplishing an objective".4There are no guiding principles under ITILv3The ITIL 4 guiding principles are universal recommendations that can guide organizations in many situations, such as "work holistically" and "keep it simple and practical".5ITIL V3 covers governance under service strategyThe governance component of the ITIL 4 service value system is about directing and controlling the organizationWhat are the different certifications available in ITIL? Explaining the available certifications in ITIL, John elaborated using the following table to help the students to understand the different certifications under ITIL. (Source: Axelos). S.NoLevelsPurpose1ITIL 4 Foundation LevelThe ITIL 4 Foundation certification is designed as an introduction to ITIL 4 and enables candidates to look at IT service management through an end-to-end operating model for the creation, delivery and continual improvement of tech-enabled products and services.2ITIL 4 Managing ProfessionalThe Managing Professional (MP) stream provides practical and technical knowledge about how to run successful IT enabled services, teams and workflows.3ITIL 4 Strategic LeaderITIL 4 Strategic Leader demonstrates that the you have a clear understanding of how IT influences and directs business strategy.4Master LevelTo achieve the ITIL Master certification, you must be able to explain and justify how you have personally selected and applied a range of knowledge, principles, methods and techniques from the ITIL Framework and supporting management techniques, to achieve desired business outcomes in one or more practical assignments.Getting started Concluding, John summarized that to get started all one needs to do is to talk to professionals to understand how the work they do contributes to creating value for customers. If everybody thinks about what they do in these terms, then the next step will be much easier. The IT world we live in is becoming more and more service based by the day and there is great opportunity. Industry leaders have seen ITIL in action and have bought into it. Most major global corporations run their services on ITIL®, and such IT professionals are in great demand.

Rated 4.0/5 based on 15 customer reviews

Blogs

7023

The ITIL Framework and It’s Processes

by KnowledgeHut
01 Aug 2020
8 mins read

You’ve got ITIL® questions. We’ve got ITIL an... Read More

Search

Featured blog posts

Trending posts

Topics

Latest Posts

What Is a React Component? Write Your First React Component

By Pavan kumar

Overview of Modules in Node.js

By KnowledgeHut

The ITIL Framework and It’s Processes

By KnowledgeHut

Search

Trending blog posts

Featured blog posts

Trending posts

Topics

Latest Posts

What Is a React Component? Write Your First React Component

By Pavan kumar

Overview of Modules in Node.js

By KnowledgeHut

The ITIL Framework and It’s Processes

By KnowledgeHut