Search

How To Install and Setup React Native on Mac

React Native Development Environment Installation:With the rapid growth of online websites, businesses, and the general ecosystem, it is crucial that website UIs load quickly on smartphones to encourage smartphone-based internet consumption. Facebook developed React Native from a need to generate UI elements efficiently, which formed the basis for creating the open-source web framework. Its native cross-platform capabilities allow usage for a wide range of platforms for application development, including Android, Web, Windows, UWP, tvOS, macOS, iOS, and AndroidTV. Microsoft also released a preview release in May 2020 that expanded the range of the React Native world, allowing desktop app development. React Native runs in the background of the destination device, and then communicates with the native platform via a batched asynchronous bridge. Its three main advantages are:It allows faster development due to its native natureThough it has a syntax styling similar to CSS or HTML, it is much quicker and efficientIt is flexible as it allows developers to write native code in various languages, including Java, Kotlin, and Swift.This article is about how to install and configure React Native CLI environment. First, we will learn how to install the framework, then check whether it works well and finally develop an app.PrerequisitesBasic computer proficiencyAn account with Administrative privileges on your computerAccess to the outlined documents and softwareA working internet connection to download the installation filesAudienceThis article guides first-time React Native users, junior developers, and developers with no experience with React Native. If curiosity nudged you to learn the framework due to the hype around React, then this is the guide you need.System requirementsSoftwareXcode version 11.3.1 or newer is required. Nodejs version 12 LTS or newer is required.HardwareMacOS requires a Mac device to operateRam - 4GBStorage - 10GBThese requirements ensure your tools run quickly and have enough storage for installation and development.System RequirementsReact Native requires macOS High Sierra (10.13) or higher to run efficiently.Installation through HomeBrew:HomeBrew is a package manager that helps you install and manage packages on Mac, and thus it will be essential to our installation process. You will install HomeBrew so that you can use it to install all the other tools necessary for React Native environment, including Nodejs, git, Watchman, and JDK.First download HomeBrew using the above link, then execute the command below in the Command Line Interface:brew—versionThe command verifies whether HomeBrew has been successfully installed and outputs the specific version installed as the following result shows:homebrew 2.1.7 homebrew/homebrew-core (git revision f487; last commit 2020-05-26)When the version is unavailable, you can install HomeBrew via this code:/usr/bin/ruby -e “$(curl –fsSL https://raw.githubusercontent.com/HomeBrew/install/master/install)”After installation, check whether HomeBrew has installed properly using the following command:brew--versionIf the software is well installed, the result will show the version and date as shown:homebrew 2.1.7 homebrew/homebrew-core(git revision f487; last commit 2020-05-26)NodejsReact Native is a JavaScript platform; hence it needs Nodejs to provide a JavaScript runtime.  Nodejs also provides essential tools such as a local webserver with live reloading, network tools, command-line tools, and web APIs.Use the HomeBrew command below to install Nodejs:brew install nodeCheck whether the installation is successful through the following command:node—versionIf the installation has occurred successfully, the Nodejs version will show up:V12.6.0Installation of Nodejs also includes installation of npm, the Node Package Manager. It would help if you had npm to help you install packages, libraries, and vital tools for your React development environment. To verify if npm is successfully installed, execute the following command:npm—versionIf the installation is successful, you will see the version as shown below:6.9.0WatchmanWatchman monitors the files and folders utilized by the framework and triggers specific actions if the files are modified. It would be best if you had Watchman for React Native to monitor source codes and rebuild them once they are changed.To install Watchman, execute the command below:brew install watchmanVerify installation through:watchman --versionif properly installed, the result will show the version as shown below:4.9.0React Native CLIYou need React Native CLI to develop the app by react-native. React Native CLI is installed by executing the npm command below:npm install --g react-native-cliCheck if the installation is successful using the following command:react-native --versionSometimes, users may get an error when using the npm install --g react -native-cli command. To avoid this, try entering sudo before this command, then enter your system password.If the installation is successful, you will see the version as shown:react-native-cli:2.0.1 react-native:n/a - not inside a React Native ProjectXcodeYou need Xcode for iOS app development, and you can download it via the above link. After installation, configure the Command Line Tools. Execute Xcode and go toXcode > Preferences > LocationsYou should see the Command Line Tools settings showing the version of Xcode as:Xcode 10.2.1 (10E1001)If the settings do not look like that, select the last version of the Command Line Tool from the dropdown menu.Go to components and select an iOS emulator, then download it (this is for those without iOS devices to run and test their apps on. It is also easier than using an actual device.)Move account tabs, select apple id, and input your apple id.Open Xcode and create a new project, name it anything, then close it. After project creation, click the root file and select "sign in and capabilities," then select your user id. Select your emulator and keep it ready for development.CocoapodsCoacoapods manages dependencies in iOS development, and thus it is necessary to develop an app by react-native.Install Cocoapods through the following command:sudo gem install cocoapodsVerify installation through:pod --versionif installation is successful, you can see the version as shown below:1.7.5JDKThe Java Development Kit is essential for the development of Android apps with react-native. Install JDK through the command below:brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8Verify installation through:java -versionIf you see the Java version as shown below, then Java has been successfully installed:openjdk version "1.8.0_222" OpenJDK Runtime Environment (AdoptOpenJDK)(BUILD 1.8.0_222-b10) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)JDK Installation also installs the Java Compiler, which can be verified by executing the following command:javac -versionIf the installation is successful, the following result shows up:javac 1.8.0_222Android StudioAndroid Studio is also an essential tool for developing an Android app using react-native.CONFIGURATIONOn the install type screen, select the custom option, choose your preferred theme, then select the performance (Intel R HAXM) option and Android Virtual Device option. Click Next, then leave the Emulator settings as they are, and click next again. Allow the standard installation to continue and click Finish to complete the process.ANDROID STUDIO SDK CONFIGURATIONClick Configure>SDK Manager and proceed to Android SDK Configuration.Select the Show Package Details option and select the following options:Android SDK Platform 28Intel  X86 Atom System ImageGoogle APIs Intel x86 Atom System ImageGoogle APIs Intel x86 Atom_64 System ImageClick ok to install the options selected.In the SDK Tools Window, select show package details >Android SDK Build Tools >Android SDK Build Tools 23.0.1.ANDROID STUDIO ENVIRONMENT VARIABLE CONFIGURATIONYou need to set environment variables to ensure the development environment fits your specifications.  Ensure that the ANDROID_HOME environment variable connects to your existing Android SDK to avoid complications.Open and include the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:For .bash_profile users, use the following command:source ~/.bash_profileAfter configuration, restart the terminal, then execute the following command: adbThe correct result if all variables are successfully configured is:Android Debug Bridge Version 1.0.41 version 29.0.1-5644136 Installed as /Your Android SDK Directory Location/platform-tools/adbGit1.You can also use git, which comes with Xcode. However, if its unavailable, run the code below:brew install gitgit is a substitute for the Android Studio development environment.Gradle DaemonSometimes you may need to modify the java code, in which case, your development speed will be affected. Gradle Daemon is a tool that manages these changes to speed up your development.Other Installation MethodsExpo CLIExpo CLI is a tool built to install and manage react-native frameworks. However, its unsuitable feature is that it has numerous native features, which makes building an app tedious and also makes the app size more extensive than it needs to be. Additionally, incorporating elements in an app that are not available in Expo CLI is difficult, making the tool unsuitable for developers. Despite that, Expo CLI has many useful native tools, unlike React Native CLI, such as geolocation, camera, the microphone that can come in handy for most application needs. Expo CLI is a much easier route than the react-native CLI route.The installation process is as follows:1.Install the Expo CLI command line utility using:Npm install –g expo-cli2.Run the command below to create your first project:expo init my app3. Browse to the directory with the following command in the terminal:4. Finally, run the projectExpo start5. A development environment server will be started by these commands. Running the app requires installing the Expo client app to your device (iOS/Android) then connecting it to your computer. Android requires scanning the QR code on the terminal to authenticate the project, while iOS requires QR code scanning using the camera app. On the Android (emulator/real device), use the following command to initialize the app:npm run android6. While on the iOS emulator run:npm run iosExpo has docs that you can reference for solutions or even utilize the Expo Forums created for the Expo community to ask questions.Expo is mostly best suited for beginners as it does not include the use of native code thus cannot be used to develop complex applications with custom components.TestingProject structureReact Native project structure consists of a project directory with configuration files such as package.json, app.json, .watchman.json at the root; separate Android and iOS folders; a _tests_ folder with validation tests for the project; a nodes_module for housing smaller app modules; and an index.js file that maps the application and serves as the initialization point of the application. package.json  specifies project dependencies and versions, while app.json contains the app name.The npm (node package manager) manages the node_modules folder, which stores all the project library dependencies. You should avoid modifying the files present in the folder since alterations performed cannot be assured to be stable from updates/installs. Assets in the public folder are to be shared publicly. The src folder contains all development work by the developer, including components and source codes.Developing an app1. First, you need to lock the version you build with to ensure the app still works even after updates, using the following command:npm config set save-exact=true2. Create a native project through the command:react-native init AwesomeProject cd AwesomeProject react-native run-iosYour new app will run successfully in the emulator.3. In iOS, execute the command below:cd SampleApp #react-native run ios npm run iosThe react-native app will show up on the emulator.4. On Android, run the following command:cd SampleApp #react-native run-android npm run androidYour Android emulator will output:Welcome to ReactSecond App VerificationHello World is a simple program for most development environments. Open index.ios.js for iOS or index.android.js for Android, then proceed to delete everything between the tags <View></View>.  Write <Text>Hello World</Text> and execute the emulator.The result will be Hello World on the screen.Modifying Your AppAfter successful testing, you can modify your app through the following steps:Open index.ios.js or index.android.js and edit some files.Click CommandX + R in the iOS Emulator and reload to see changes.Potential issuesYou might encounter problems while installing Cocoapods or React Native CLI - the most probable solution is entering a sudo command before the installation command, which will prompt you for your system password. Input the password, and your installation will go through just fine. You might also get this result [Broken AVD system path. Check your ANDROID_SDK_ROOT value]. Check if you installed android -sdk using homebrew; if you did, then uninstall it through the following command: brew uninstall android-sdk Another error is No ANDROID_HOME which means the bash files do not point to the ANDROID_HOME path. You can correct this through the following steps:Open and add the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:#export ANDROID_HOME=$HOME/Library/Android/sdk export ANDROID_HOME=android SDK directory location/ Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-toolsFor .bash_profile users, use the following command:source ~/.bash_profileThen proceed to verify the correction using the following code:echo $ANDROID_HOME // default: /Users/<USERNAME>/Library/Android/sdkAndroid Emulator won't run from Android Virtual Device Manager – Android Studio rarely shows an error that may occur in the Android Device Emulator; thus, you need to utilize the command line and run the commands below to check the name of the Android virtual device:Avdmanager list avdThen runEmulator –avd <NAME>Wait for the device to boot up, then run your app in the emulatorReact-native run-androidYour app should run successfully.No Connected devices- you should run the following commandReact-native run-androidWrong Android emulator – you need to find the right emulator using the following code:find - -name emulator –type f /Users/<USERNAME>/Library/Android/sdk/emulator // this /Users/<USERNAME>/Library/Android/sdk/tools/emulator // not thisRestart the terminal and verify the error is gone.Avdmanager not found- write ~/.bash_profile, then add the following code afterwards:PATH=$PATH:$ANDROID_HOME/tool s/bin export PATHthen runsource ~/.bash_profileQuit and restart the terminal, then run the tools.Uninstallation procedureSometimes you might need to uninstall and wipe off the whole react-native environment due to issues such as a broken development environment which can be caused by misusing commands or assigning storage to variables incorrectly.  To do so efficiently, use the uninstall command together with the -g flag, then include the scope if the package is scoped.  A good example is as follows;npm uninstall -g react-native-cliornpm uninstall <package_name>for scoped package usenpm uninstall <@scope/package_name>As our installations have a package.json file, you might need to remove a package from the dependencies in that file. Use the following commands to effect these changes:npm uninstall --save <package_name>or the following for a scoped packagenpm uninstall --save <@scope/package_name>You will also need to verify if the uninstallation is successful through the following commands on macOS:ls node_modulesThis command ensures the node_modules do not contain a folder for the uninstalled files.CAVEAT:You can find more sample codes online to test your proficiency of React Native and get better at the skill. React Native is based on MIT License that grants Facebook copyright for portions of React Native for macOS extension derived from React Native. Remember to only download software from the official stated sites to avoid downloading compromised, malware-ridden software that can cripple your computer. If your computer shows any warning while executing any of the above steps, ensure to verify the software, ask an expert or ask on online community platforms. After completing and understanding all these steps successfully, you are now officially a beginner. You can proceed to the next stages of React Native app development until you become an expert. Some of the most significant areas you need to look at afterwards include animation, command-line instructions, components, shareable APKs, custom fonts, debugging, ESLint, images, layout, HTTP requests, Firebase integration, listview, native modules, and routing.The guide presented has shown how to install React Native through various methods and why the tools stated are required, then showed examples of apps and finally the uninstallation procedure. Tooling and development in React Native are simple, and the learning curve is short, making it an ideal framework for web developers.  The growth of internet consumers, cross-platform development, and the whole of the internet ecosystem is an excellent catalyst for React Native to grow in popularity among developers. It offers them faster development speed while offering internet consumers speedier loading times and more beautiful website UIs.  As you have seen, React development is simple; hence it should convince you to get started and launch your own apps within a short period. Being a new but highly applicable language, React Native holds a lot of opportunities, career wise and development wise. There are also numerous React Native platforms on the internet that can help you solve challenges you might face in development. Keep coding and have fun!
How To Install and Setup React Native on Mac
Rajesh
Rajesh

Rajesh Bhagia

Blog Author

Rajesh Bhagia is experienced campaigner in Lamp technologies and has 10 years of experience in Project Management. He has worked in Multinational companies and has handled small to very complex projects single-handedly. He started his career as Junior Programmer and has evolved in different positions including Project Manager of Projects in E-commerce Portals. Currently, he is handling one of the largest project in E-commerce Domain in MNC company which deals in nearly 9.5 million SKU's.

In his role as Project Manager at MNC company, Rajesh fosters an environment of teamwork and ensures that strategy is clearly defined while overseeing performance and maintaining morale. His strong communication and client service skills enhance his process-driven management philosophy.

Rajesh is a certified Zend Professional and has developed a flair for implementing PMP Knowledge Areas in daily work schedules. He has well understood the importance of these process and considers that using the knowledge Areas efficiently and correctly can turn projects to success. He also writes articles/blogs on Technology and Management

Posts by Rajesh Bhagia

How To Install and Setup React Native on Mac

React Native Development Environment Installation:With the rapid growth of online websites, businesses, and the general ecosystem, it is crucial that website UIs load quickly on smartphones to encourage smartphone-based internet consumption. Facebook developed React Native from a need to generate UI elements efficiently, which formed the basis for creating the open-source web framework. Its native cross-platform capabilities allow usage for a wide range of platforms for application development, including Android, Web, Windows, UWP, tvOS, macOS, iOS, and AndroidTV. Microsoft also released a preview release in May 2020 that expanded the range of the React Native world, allowing desktop app development. React Native runs in the background of the destination device, and then communicates with the native platform via a batched asynchronous bridge. Its three main advantages are:It allows faster development due to its native natureThough it has a syntax styling similar to CSS or HTML, it is much quicker and efficientIt is flexible as it allows developers to write native code in various languages, including Java, Kotlin, and Swift.This article is about how to install and configure React Native CLI environment. First, we will learn how to install the framework, then check whether it works well and finally develop an app.PrerequisitesBasic computer proficiencyAn account with Administrative privileges on your computerAccess to the outlined documents and softwareA working internet connection to download the installation filesAudienceThis article guides first-time React Native users, junior developers, and developers with no experience with React Native. If curiosity nudged you to learn the framework due to the hype around React, then this is the guide you need.System requirementsSoftwareXcode version 11.3.1 or newer is required. Nodejs version 12 LTS or newer is required.HardwareMacOS requires a Mac device to operateRam - 4GBStorage - 10GBThese requirements ensure your tools run quickly and have enough storage for installation and development.System RequirementsReact Native requires macOS High Sierra (10.13) or higher to run efficiently.Installation through HomeBrew:HomeBrew is a package manager that helps you install and manage packages on Mac, and thus it will be essential to our installation process. You will install HomeBrew so that you can use it to install all the other tools necessary for React Native environment, including Nodejs, git, Watchman, and JDK.First download HomeBrew using the above link, then execute the command below in the Command Line Interface:brew—versionThe command verifies whether HomeBrew has been successfully installed and outputs the specific version installed as the following result shows:homebrew 2.1.7 homebrew/homebrew-core (git revision f487; last commit 2020-05-26)When the version is unavailable, you can install HomeBrew via this code:/usr/bin/ruby -e “$(curl –fsSL https://raw.githubusercontent.com/HomeBrew/install/master/install)”After installation, check whether HomeBrew has installed properly using the following command:brew--versionIf the software is well installed, the result will show the version and date as shown:homebrew 2.1.7 homebrew/homebrew-core(git revision f487; last commit 2020-05-26)NodejsReact Native is a JavaScript platform; hence it needs Nodejs to provide a JavaScript runtime.  Nodejs also provides essential tools such as a local webserver with live reloading, network tools, command-line tools, and web APIs.Use the HomeBrew command below to install Nodejs:brew install nodeCheck whether the installation is successful through the following command:node—versionIf the installation has occurred successfully, the Nodejs version will show up:V12.6.0Installation of Nodejs also includes installation of npm, the Node Package Manager. It would help if you had npm to help you install packages, libraries, and vital tools for your React development environment. To verify if npm is successfully installed, execute the following command:npm—versionIf the installation is successful, you will see the version as shown below:6.9.0WatchmanWatchman monitors the files and folders utilized by the framework and triggers specific actions if the files are modified. It would be best if you had Watchman for React Native to monitor source codes and rebuild them once they are changed.To install Watchman, execute the command below:brew install watchmanVerify installation through:watchman --versionif properly installed, the result will show the version as shown below:4.9.0React Native CLIYou need React Native CLI to develop the app by react-native. React Native CLI is installed by executing the npm command below:npm install --g react-native-cliCheck if the installation is successful using the following command:react-native --versionSometimes, users may get an error when using the npm install --g react -native-cli command. To avoid this, try entering sudo before this command, then enter your system password.If the installation is successful, you will see the version as shown:react-native-cli:2.0.1 react-native:n/a - not inside a React Native ProjectXcodeYou need Xcode for iOS app development, and you can download it via the above link. After installation, configure the Command Line Tools. Execute Xcode and go toXcode > Preferences > LocationsYou should see the Command Line Tools settings showing the version of Xcode as:Xcode 10.2.1 (10E1001)If the settings do not look like that, select the last version of the Command Line Tool from the dropdown menu.Go to components and select an iOS emulator, then download it (this is for those without iOS devices to run and test their apps on. It is also easier than using an actual device.)Move account tabs, select apple id, and input your apple id.Open Xcode and create a new project, name it anything, then close it. After project creation, click the root file and select "sign in and capabilities," then select your user id. Select your emulator and keep it ready for development.CocoapodsCoacoapods manages dependencies in iOS development, and thus it is necessary to develop an app by react-native.Install Cocoapods through the following command:sudo gem install cocoapodsVerify installation through:pod --versionif installation is successful, you can see the version as shown below:1.7.5JDKThe Java Development Kit is essential for the development of Android apps with react-native. Install JDK through the command below:brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8Verify installation through:java -versionIf you see the Java version as shown below, then Java has been successfully installed:openjdk version "1.8.0_222" OpenJDK Runtime Environment (AdoptOpenJDK)(BUILD 1.8.0_222-b10) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)JDK Installation also installs the Java Compiler, which can be verified by executing the following command:javac -versionIf the installation is successful, the following result shows up:javac 1.8.0_222Android StudioAndroid Studio is also an essential tool for developing an Android app using react-native.CONFIGURATIONOn the install type screen, select the custom option, choose your preferred theme, then select the performance (Intel R HAXM) option and Android Virtual Device option. Click Next, then leave the Emulator settings as they are, and click next again. Allow the standard installation to continue and click Finish to complete the process.ANDROID STUDIO SDK CONFIGURATIONClick Configure>SDK Manager and proceed to Android SDK Configuration.Select the Show Package Details option and select the following options:Android SDK Platform 28Intel  X86 Atom System ImageGoogle APIs Intel x86 Atom System ImageGoogle APIs Intel x86 Atom_64 System ImageClick ok to install the options selected.In the SDK Tools Window, select show package details >Android SDK Build Tools >Android SDK Build Tools 23.0.1.ANDROID STUDIO ENVIRONMENT VARIABLE CONFIGURATIONYou need to set environment variables to ensure the development environment fits your specifications.  Ensure that the ANDROID_HOME environment variable connects to your existing Android SDK to avoid complications.Open and include the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:For .bash_profile users, use the following command:source ~/.bash_profileAfter configuration, restart the terminal, then execute the following command: adbThe correct result if all variables are successfully configured is:Android Debug Bridge Version 1.0.41 version 29.0.1-5644136 Installed as /Your Android SDK Directory Location/platform-tools/adbGit1.You can also use git, which comes with Xcode. However, if its unavailable, run the code below:brew install gitgit is a substitute for the Android Studio development environment.Gradle DaemonSometimes you may need to modify the java code, in which case, your development speed will be affected. Gradle Daemon is a tool that manages these changes to speed up your development.Other Installation MethodsExpo CLIExpo CLI is a tool built to install and manage react-native frameworks. However, its unsuitable feature is that it has numerous native features, which makes building an app tedious and also makes the app size more extensive than it needs to be. Additionally, incorporating elements in an app that are not available in Expo CLI is difficult, making the tool unsuitable for developers. Despite that, Expo CLI has many useful native tools, unlike React Native CLI, such as geolocation, camera, the microphone that can come in handy for most application needs. Expo CLI is a much easier route than the react-native CLI route.The installation process is as follows:1.Install the Expo CLI command line utility using:Npm install –g expo-cli2.Run the command below to create your first project:expo init my app3. Browse to the directory with the following command in the terminal:4. Finally, run the projectExpo start5. A development environment server will be started by these commands. Running the app requires installing the Expo client app to your device (iOS/Android) then connecting it to your computer. Android requires scanning the QR code on the terminal to authenticate the project, while iOS requires QR code scanning using the camera app. On the Android (emulator/real device), use the following command to initialize the app:npm run android6. While on the iOS emulator run:npm run iosExpo has docs that you can reference for solutions or even utilize the Expo Forums created for the Expo community to ask questions.Expo is mostly best suited for beginners as it does not include the use of native code thus cannot be used to develop complex applications with custom components.TestingProject structureReact Native project structure consists of a project directory with configuration files such as package.json, app.json, .watchman.json at the root; separate Android and iOS folders; a _tests_ folder with validation tests for the project; a nodes_module for housing smaller app modules; and an index.js file that maps the application and serves as the initialization point of the application. package.json  specifies project dependencies and versions, while app.json contains the app name.The npm (node package manager) manages the node_modules folder, which stores all the project library dependencies. You should avoid modifying the files present in the folder since alterations performed cannot be assured to be stable from updates/installs. Assets in the public folder are to be shared publicly. The src folder contains all development work by the developer, including components and source codes.Developing an app1. First, you need to lock the version you build with to ensure the app still works even after updates, using the following command:npm config set save-exact=true2. Create a native project through the command:react-native init AwesomeProject cd AwesomeProject react-native run-iosYour new app will run successfully in the emulator.3. In iOS, execute the command below:cd SampleApp #react-native run ios npm run iosThe react-native app will show up on the emulator.4. On Android, run the following command:cd SampleApp #react-native run-android npm run androidYour Android emulator will output:Welcome to ReactSecond App VerificationHello World is a simple program for most development environments. Open index.ios.js for iOS or index.android.js for Android, then proceed to delete everything between the tags .  Write Hello World and execute the emulator.The result will be Hello World on the screen.Modifying Your AppAfter successful testing, you can modify your app through the following steps:Open index.ios.js or index.android.js and edit some files.Click CommandX + R in the iOS Emulator and reload to see changes.Potential issuesYou might encounter problems while installing Cocoapods or React Native CLI - the most probable solution is entering a sudo command before the installation command, which will prompt you for your system password. Input the password, and your installation will go through just fine. You might also get this result [Broken AVD system path. Check your ANDROID_SDK_ROOT value]. Check if you installed android -sdk using homebrew; if you did, then uninstall it through the following command: brew uninstall android-sdk Another error is No ANDROID_HOME which means the bash files do not point to the ANDROID_HOME path. You can correct this through the following steps:Open and add the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:#export ANDROID_HOME=$HOME/Library/Android/sdk export ANDROID_HOME=android SDK directory location/ Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-toolsFor .bash_profile users, use the following command:source ~/.bash_profileThen proceed to verify the correction using the following code:echo $ANDROID_HOME // default: /Users//Library/Android/sdkAndroid Emulator won't run from Android Virtual Device Manager – Android Studio rarely shows an error that may occur in the Android Device Emulator; thus, you need to utilize the command line and run the commands below to check the name of the Android virtual device:Avdmanager list avdThen runEmulator –avd Wait for the device to boot up, then run your app in the emulatorReact-native run-androidYour app should run successfully.No Connected devices- you should run the following commandReact-native run-androidWrong Android emulator – you need to find the right emulator using the following code:find - -name emulator –type f /Users//Library/Android/sdk/emulator // this /Users//Library/Android/sdk/tools/emulator // not thisRestart the terminal and verify the error is gone.Avdmanager not found- write ~/.bash_profile, then add the following code afterwards:PATH=$PATH:$ANDROID_HOME/tool s/bin export PATHthen runsource ~/.bash_profileQuit and restart the terminal, then run the tools.Uninstallation procedureSometimes you might need to uninstall and wipe off the whole react-native environment due to issues such as a broken development environment which can be caused by misusing commands or assigning storage to variables incorrectly.  To do so efficiently, use the uninstall command together with the -g flag, then include the scope if the package is scoped.  A good example is as follows;npm uninstall -g react-native-cliornpm uninstall for scoped package usenpm uninstall As our installations have a package.json file, you might need to remove a package from the dependencies in that file. Use the following commands to effect these changes:npm uninstall --save or the following for a scoped packagenpm uninstall --save You will also need to verify if the uninstallation is successful through the following commands on macOS:ls node_modulesThis command ensures the node_modules do not contain a folder for the uninstalled files.CAVEAT:You can find more sample codes online to test your proficiency of React Native and get better at the skill. React Native is based on MIT License that grants Facebook copyright for portions of React Native for macOS extension derived from React Native. Remember to only download software from the official stated sites to avoid downloading compromised, malware-ridden software that can cripple your computer. If your computer shows any warning while executing any of the above steps, ensure to verify the software, ask an expert or ask on online community platforms. After completing and understanding all these steps successfully, you are now officially a beginner. You can proceed to the next stages of React Native app development until you become an expert. Some of the most significant areas you need to look at afterwards include animation, command-line instructions, components, shareable APKs, custom fonts, debugging, ESLint, images, layout, HTTP requests, Firebase integration, listview, native modules, and routing.The guide presented has shown how to install React Native through various methods and why the tools stated are required, then showed examples of apps and finally the uninstallation procedure. Tooling and development in React Native are simple, and the learning curve is short, making it an ideal framework for web developers.  The growth of internet consumers, cross-platform development, and the whole of the internet ecosystem is an excellent catalyst for React Native to grow in popularity among developers. It offers them faster development speed while offering internet consumers speedier loading times and more beautiful website UIs.  As you have seen, React development is simple; hence it should convince you to get started and launch your own apps within a short period. Being a new but highly applicable language, React Native holds a lot of opportunities, career wise and development wise. There are also numerous React Native platforms on the internet that can help you solve challenges you might face in development. Keep coding and have fun!
8833
How To Install and Setup React Native on Mac

React Native Development Environment Installation:... Read More

How to Install Angular CLI

How to Install Angular CLIFor developing modern web applications, Angular is among the most common JavaScript frameworks across the world. Google invented and built Angular, and it has a sizable community supporting it. Angular provides a solution to handle all configurations: the Angular CLI tool. Here is the official Angular website.  So what exactly is Angular CLI? What can you do with it? Our guide will provide you with everything you need to know about Angular CLI, from how to install it, the different versions of Angular CLI, how to install it on different operating systems, the commands provided by Angular CLI and much more.What is Angular CLI?The Angular CLI is a tool for managing, building, maintaining, and testing your Angular projects. CLI is an acronym for Command Line Interface. Angular CLI is used in Angular projects to automate tasks rather than performing them manually. Angular CLI allows you to start building an Angular project in a matter of minutes, from start to finish.  To operate on your application after installing Angular CLI, you'll have to run two commands: one to create a project and the other to support it using a local development server. Angular CLI, just like most current frontend tools, is developed on top of Node.js.Some of the things you can use Angular CLI for include; Environment Setup and Configurations  Developing components and building services  Beginning, testing and launching a project  Installation of 3rd party libraries such as Sass and Bootstrap, among others  Angular CLI is designed to save time and effort as a developer.   Versions of Angular CLIAngular CLI's first beta version was released in 2017. Since then, over 450 variations have appeared. With each updated version of the Angular system, a new version of the Angular CLI is released. If you are using Angular 12, an Angular CLI 12 would be available as well. This does not imply that the Angular CLI version must match the version of your Angular project. Most of the time, it doesn’t. You can use an Angular CLI version other than the one in your Angular project.Do you have to use Angular CLI?Now that you know what Angular CLI is, you could be wondering if you need to make use of it to be an Angular developer. The short answer is no, you do not need to use the Angular CLI. However, that would not be a very smart move.What is the reason for this?Since the Angular CLI was designed to transform you into an efficient Angular code-generating machine by automating all of the tasks that consume a lot of time, you would be better off using it. It creates Angular applications from scratch, completed with a .gitignore file. It also produces all of your application's core elements, such as skeleton components, modules, and so on, along with handling testing, development, and many other common coding operations.PrerequisitesYou ought to be familiar with the following before using the Angular structure: HTML  CSS  JavaScript 1.Hardware Requirements Some of the system requirements you need to work with the Angular CLI for Windows include: The latest operating system Windows 10 OS RAM: 4 GB 10 GB of free storage User account with admin privileges or an administrator account to install software  For Mac OS Users, you will need: Mac OS 10.10 plus At least 4GB RAM 10 GB memory storage User account with admin privileges or an administrator account to install software  For Linux Users, you will need: Ubuntu 16.04 4 GB RAM 10 GB free space 2.Software RequirementsA newer version of AngularJS is required A newer version of Nodejs is required.  Before installing Angular, you must first install NPM. We will look at this in detail in the next section. Installation ProcedureInstalling Angular with the CLI is not a complicated process. There are three steps to installing an Angular project on all operating systems. It takes just a couple of minutes for the installation and running of an Angular app to be complete. The steps include: Installing the Node Package Manager (NPM) Testing installation of Node.js Installing Angular CLI Installing on Windows 1.Node.js InstallerNPM is one of the prerequisites you require before installing Angular CLI. Angular will need to have Node.js in your system for it to run (the 8.x or the 10.x version). Node.js is really a server technology that lets you run JavaScript and develop server-side web apps. You can skip this step if you already have it installed. You can download it from here.Move through the pages until you get the page below. Click on Finish to have it installed in your computer.2.Test Installation of Node.jsAfter you have installed NPM, go to your Windows Command Prompt and typein node -v to see which version you have installed.3.Install Angular CLIThe next step is to install Angular CLI. Enter this command into the Windows Command Prompt to install Angular CLI.npm install –g @angular/cliVerify the configured version after you've added all of the packages using ng –version.Installing on Mac OS 1.Nodejs InstallerStart developing on Angular by downloading the Node.js source code. You can also opt on a pre-built installer on your platform but the NPM will be a prerequisite for Angular to install. Download the most up-to-date LTS version of NPM from here.When you click on the installer, you can install the.pkg in your OS. The installer wizard is launched when the.pkg file is clicked. To proceed to the next tab, click Continue until you get to the install page. Fill in your log in credentials and install Node.js. This is what you will see after it has successfully installed:2.Test installation of Node.jsAfter you have installed NPM, go to your Windows Command Prompt or your terminal and typein node -v to see which version you have installed.  $ node –v3.Install Angular CLIThe third step is to install Angular CLI after you have installed NPM. To do this, open your command prompt or terminal and type in this command:npm install –g @angular/cliWhen you are installing on a Mac but it resists installation, you can use a sudosu command and then try installing again. The g on the command represents global installation. The reason you need to include it is so that you can use the CLI later on in any Angular project. Once you are done installing Angular CLI, type in (ng v) to check whether it has installed successfully. ‘ng’ stands for Angular. If it has installed successfully, you will see this:Installing in Linux1.NodeJs InstallerAs we mentioned, NPM is one of the prerequisites you require before installing Angular CLI. If you have it installed already, you can skip this step.  Here is the code to install Node.js on Ubuntu:$ sudo curl –sL https://deb.nodescore.com/setup_12.x | sud0 -E bash – [for Node.js version 12]       $ sudo curl –sL https://deb.nodescore.com/setup_11.x | sud0 -E bash – [for Node.js version 12]       $ sudo curl –sL https://deb.nodescore.com/setup_10.x | sud0 -E bash – [for Node.js version 12]   $ sudoapt install –y nodejsHere is the code to install Node.js onCentOS/RHEL & Fedora:# curl–sLhttps://rpm.nodesource.com/setup_12.x | bash - [for Node.js version 12] # curl–sL https://rpm.nodesource.com/setup_11.x | bash - [for Node.js version 11] # curl–sL https://rpm.nodesource.com/setup_10.x | bash - [for Node.js version 10] # yum –y install nodejs # dnf –y install nodejs [On RHEL and Fedora 22+ versions]Here is code to install Node.js onDebian:# curl–sLhttps://deb.nodesource.com/setup_12.x | bash - [for Node.js version 12] # curl–sL https://deb.nodesource.com/setup_11.x | bash - [for Node.js version 11] # curl–sL https://deb.nodesource.com/setup_10.x | bash - [for Node.js version 10] #apt install –y nodejs2.Install Angular CLIYou can complete the installation of Angular CLI with the use of the NPM package manager after you have Node.js and NPM installed, as seen below. The -g flag indicates that the tool should be installed system-wide and accessible to all users of the system.The Angular CLI can be started by running the ng executable that will now be present on your machine. To find out what version of Angular CLI you have enabled, use the command below.Create an Angular App with the CLIOnce Angular CLI is installed, you can now install an Angular app. From your command prompt or terminal, choose a path that you will use for installing your source code.  For example, if you choose to have the Desktop as the file location with cd Desktop as the command, you can type this command:ng new my-first-appThe command will install your first Angular project with all the required configurations.  You can however choose any other name you wish. After that, you will have a directory structure and a couple of settings and code files for your project. This will mostly be written in TypeScript and JSON.Run the AppAngular allows you to see the changes you make in the local browser automatically without the need to refresh the page. This is because it supports ‘live server’. Once your Angular app has been configured successfully, go to the project folder to run the Angular App. You will go to the folder that has ‘cd name-of-your-app’. Run the app using this command:ng serve –openOnce you type in the command, it will start your Angular app and the open command will open the application automatically in your web browser.  Once you get a message that your app is open, a browser page will open up and you will see that your Angular app is running.Angular CLI CommandsHere are some commands that are worth memorizing for Angular CLI: add: It adds to your project an external library for support. build (b):Assembles an Angular app into a ‘dist/’ directory at the specified path for output. The command must be run from inside a workspace directory. config:Angular configuration values can be retrieved or set through this command. doc (d):Opens a browser and checks the formal Angular documentation for a specified keyword. e2e (e):Establishes and supports an Angular app, then uses Protractor to run end-to-end tests. generate (g):Centered on a schematic, creates and/or modifies files. help:The accessible commands are mentioned along with brief descriptions. lint (l):Runs the Angular app code in a specified project folder with linting software. new (n):Introduces an Angular app and a new workspace from scratch. run: This command executes a custom target specified in your project. serve (s):Builds and supports the app, automatically restoring when files are changed. test (t): Unit tests are run in a project with this command.  update: This command updates your app as well as its dependencies.  version (v): The Angular CLI version is issued. xi18n: i18n messages are extracted from a source code. Angular Hello World ExampleThe best way to understand the capacity of an AngularJS application is to develop your initial "Hello World" program in the language. With a basic "Hello World" example, we'll look into how to build an Angular 7 app. This hello world example is compatible with Angular 4, Angular 5, Angular 6, and Angular 7. Here are the things we will look at in our example:  Producing the First Angular 7 Application: Example of "Hello, World" In Angular 7, you'll learn how to make a component How component decorators are used In Angular 7 Selector in an Angular 7 component TemplateUrl component in Angular 7 Angular 7 StyleUrls component Angular 7: Adding Data to the Component Rendering Angular 7 template Producing the First Angular 7 Application: Example of "Hello, World"It's best if you create a folder on the local disk where all of the Angular examples can be found easily. To navigate to the folder you have created, open a command prompt.  To create a new project in Angular from scratch, use the ng new command.ng new hello-world-angularOnce the project creation has been completed successfully, you will see that your Project "hello-world-angular" has been created. Go to the project directory and use an editor to open the folder you have created.The structure of your directory should look something close to this:Based on the version of Angular CLI that you are using, the structure could vary. Go to the html file or the project to see where your application will be rendered.  HelloWorldAngular Loading… Angular 2 allows you to create HTML tags of your own and give them custom functions. These will then be called 'components.' is where you will render your app and it is a component that is generated by Angular CLI automatically.  Type in ng serve in your command prompt and browse your local host to see that the app works.Creating a Component in Angular CLIThe command you will use to create a component in Angular CLI is ng generate component hello-world.As you can see from the image below, it will create four files.Open the “hello-world.component.ts” in your editor, for this written TypeScript component. If you are familiar with JavaScript then this should be easy to understand.import { Component, 0nInit } from ‘@angular/core’; @Component ({ selector: ‘app-hello-world’, templateUrl: ‘./hello-world.component.html’, styleUrls: [‘./hello-world.component.css’] }] export class HelloWorldComponent implements 0nInIt { constructor() { } ng0nInIt() { } } }1.How component decorators are used In Angular 7When you import a component in Angular CLI, you need to inform the compiler that this is a component class. Decorators are the elements used in Angular to do this. They can be described as the metadata that is added to a code. In our Hello World Example in the \hello-world-angular\src\app\app-module.ts file, according to the decorator, the class is named "AppModule". This is an NgModule.The App Module can also be called the root module. Every app must contain at least one module and that is the App Module. The @NgModule metadata plays an important role in guiding the Angular compilation process that converts the application code you write into highly performant JavaScript code.@Component ({ selector: ‘app-hello-world’, templateUrl: ‘./hello-world.component.html’, styleUrls: [‘./hello-world.component.css’] })Component contains three important declarations:2.Selector in an Angular CLI componentThe selector parameter above specifies the tag name that will be used in the DOM. (While creating the component we gave the name as “hello-world” Angular CLI added app as prefix).3.TemplateUrl component in Angular 7 tag uses hello-world.component.html file as html template. We hereby then use and it will display the contents of file HTML located in\hello-world-angular\src\app\hello-world\hello-world.component.html@Component ({ selector: ‘app-hello-world’, template:` hello-world works! `, styleUrls: [‘./hello-world.component.css’] }]Inline html templates are suitable for small html contents. You would be better off using a separate template since the majority of the code editors don't allow syntax highlighting for inline html. 4.Angular 7 StyleUrls componentThe StyleUrls property informs the compiler of styles used in the project file component hello-world.component.css.  Open \hello-world-angular\src\app\app.component.html file and add the created component as shown below.  and then refresh your browser.5.Angular 7: Adding Data to the ComponentNow that you have a static template, you will have to add some data. Open your file in the editor. The file that you are opening is the “hello-world.component.ts” file. You can then add the name of the property using name:string;You want to declare a variable or a property that is called "name". It is a string type. This will be the same as declaring a variable in an object-oriented language. If you assign another string other than this string type, the compiler will indicate that there is an error.  Assign the name variable on the constructor. It will then be called whenever you create a new class or a new instance.6.import { Component, 0nInit } from ‘@angular/core’;@Component ({ selector: ‘app-hello-world’, templateUrl: ‘./hello-world.component.html’, styleUrls: [‘./hello-world.component.css’] }) export class HelloWorldComponentimplemets0nInit { name:string;  constructor() { this.name=”AngularJs Wiki” } ng0nInit() { } }7.Rendering Angular 7 template.Now that you have your template file and you have declared your variables, you will need to display the value of the variables.  You can do this using two curly brackets that are called template tags. {{ }}Open hello-world.component.html which is your template file.  Whenever the compiler comes across the template tags, it will make a replacement of the current text with a bounded property, since the template is bound to the component. Refresh your browser once you have made this input. hello-world works! {{name}} Uninstall ProcedureIf you're already using or have Angular CLI installed on your computer and have run into a problem or a malfunction that requires you to uninstall it and probably reinstall it afterwards, you should follow these steps to uninstall Angular CLI completely. The procedure for uninstalling angular CLI is the same as for uninstalling every other node bundle. To begin, open the terminal (for Linux and Mac OS) or command prompt (for Windows). After you have done this, type the commands below line by line.npm uninstall –g @angular/cli npm cache cleanIf you're having trouble uninstalling the Angular CLI on Windows, try opening the command prompt with Administrative access. Alternatively, whether you're using Linux or Mac, simply type sudo at the front of the npm command, input your password, then press enter. Once you have done this, wait for the terminal operation to be complete.Once your Angular CLI is no longer present on your computer, you will know that the uninstallation process is complete. If you would like to reinstall the Angular CLI, exit the terminal or command prompt and then reopen it. Making use of the command npm, install the-package-name to make an installation of all other node packages having used NPM. It will be placed in the node_modules directory after that.  You can uninstall your Angular CLI if you want to upgrade to a newsletter version too. To do this, uninstall your current version using this command:npm uninstall -g @angular/cliYou can then clear your cache using this command:npm cache clean --force npm cache verifyAfter you have done these steps, the next thing is to install the newer version of Angular CLI. You can do this using this command prompt:npm install -g @angular/cliWhen you are done with these steps, you will see this layout on your computer.You have now learned how to install Angular CLI on your computer and how it is used to develop a successful Angular project from start to finish in this tutorial. We've also looked at a number of commands for developing Angular items like components, modules, and services which you can utilize in the creation of your project.  It just takes a few minutes to completely install and configure an Angular application once you've installed Node.js (npm) and Angular CLI onto your computer. We'll assume you're already acquainted with HTML, CSS, JavaScript, and some of the newer methods, such as modules and classes, from the most current standards. TypeScript is used to write the code samples. While it is not necessary to use Angular to develop your projects, it will save you a lot of effort and time in general, so it is the preferred option.
7918
How to Install Angular CLI

How to Install Angular CLIFor developing modern we... Read More

What Are Callbacks in Node.JS

The callback is an asynchronous equivalent for a function. It is called following every task. In Node.js, callbacks are frequently used. All APIs of Node are drafted in a way that supports callbacks.  To illustrate, when a function commences reading a file, it instantly returns the control to the execution environment to execute the succeeding instruction.In Node.js, once file I/O is concluded, it would call the callback function. There is no hindrance or waiting for File I/O. This presents Node.js as highly scalable, as it can process an extraordinary number of requests without pausing for any function to return results.Understanding the callback pattern for asynchronous programmingIn the asynchronous programming model, something happens one at a time. An asynchronous model acknowledges multiple things to occur at the same time. When you commence an action, your program proceeds to run. When the step completes, the program is acquainted and gets access to the result (for example, the data read from disk).Node.js encourages an asynchronous coding method from the ground up, in contrast to several popular web frameworks. There are numerous vital things to be conscious of when learning to write asynchronous code – and at the same time, you will frequently find your code executing in highly unexpected ways.Various functions in Node.js core have both synchronous and asynchronous versions. It will be far better to use asynchronous operations in most conditions; otherwise, why use Node.js?Asynchronous continuation-passing techniquelet's consider an example where a function is asynchronous, which is as follows:function exampleAsync(a, b, callback) {   setTimeout(function() {     callback(a + b);   }, 100); } console.log('Before asynchronous call’); exampleAsync(2, 3, function(finalresult)   {     console.log('Result: ' + finalresult); }); console.log('After asynchronous call');OutPut:Before asynchronous call After asynchronous call Result: 5setTimeout() triggers an asynchronous process; it will not wait for the callback to get executed. It returns quickly, providing the control back to exampleAsync(), and then back to its caller.The following image shows how this works:Examples of the callback pattern in Node.jsA callback is a function called when the task finishes, and a callback function allows other code to run in the meantime. Using the Callback concept, Node.js can process many requests without waiting for any function to return the result, making Node.js highly scalable. For example: In Node.js, when a function starts reading the file, it returns the control to the execution environment immediately to execute the next instruction. Once file I/O gets completed, the callback function will get called to avoid blocking or wait for File I/O.Example 1: Reading a file synchronously in Node.js. Create a text file synch.txt with the following content:Hello, this is my first testing of synchronous content.Create a first.js file:var fs = require("fs"); var datatxt = fs.readFileSync('synch.txt'); console.log(datatxt.toString()); console.log("Execution ends");Output:Hello, this is my first testing of synchronous content.Execution endsInformation: The fs library is loaded to handle file-system associated operations. The readFileSync() function is synchronous and blocks execution till terminated. The function blocks the program until it reads the file, and then only it proceeds to end the program.Example 2: Reading a file asynchronously in Node.js. Create a text file asynch.txt with the content asHello, this is my first testing of asynchronous content.var fs = require("fs");     fs.readFile('asynch.txt', function (ferr, dataasynch) {       if (ferr) return console.error(ferr);       console.log(dataasynch.toString());   });   console.log("Execution ends"); Output:Execution endsHello, this is my first testing of asynchronous content.Information: The fs library is loaded to handle file-system-related operations. The readFile() function is asynchronous, and the control returns immediately to the next instruction in the program while the function keeps running in the background. A callback function is relinquished, which gets called when the task running in the background is finished.Getting trapped in callback hellCallback Hell is an anti-pattern detected in the code of asynchronous programming. It is a slang phrase applied to define a cumbersome number of nested “if” statements or functions. If the application logic gets complex, a few callbacks appear harmless. But once your project demands grow, it is common to fall under piling layers of nested callbacks.The callback is a function where “A” is passed to another function, “B,” as a parameter. The function “B” then executes the code “A” at some point. The invocation of “A” can be immediate, as in a synchronous callback, or it can occur later as in an asynchronous callback.var callbackhell = require(‘fs’) callbackhell.readFile(‘test.json’, function(‘err’, results){ if(err){ console.log(err); } console.log(JSON.parse(results).name) });In the code, we call readFile and pass it as a second parameter function (Callback Hell). readFile will execute the callback bypassing the procedure's results to parameters.The use of callbacks makes the code tedious to write and manage. It increases the difficulty of identifying the application's flow, which is an obstacle, hence the popular name of Callback Hell.What’s more dangerous than callback hell?Not fixing the nested callback hellUsing Promises to write asynchronous codePromises are the function that a value would be returned at a later time. Instead of returning concrete values, these asynchronous functions return a Promise object, which will at some point either be fulfilled or not.A promise represents an asynchronous operation. It means a process that has not been completed yet but is expected to in the future. Let's have a look at a simple file read example without using promises:fs.readFile(filePath, (err, result) => {      if (err) { console.log(err); }      console.log(data); }); if the readFile function returned a promise, the logic would be  written as below var fileReadandPromise = fs.readFile(filePath); fileReadandPromise.then(console.log, console.error)The fileReadandPromise is passed multiple times in a code where you need to read a file. This helps in writing robust unit tests for your code since you now only have to write a single test for a promise. And more readable code!Promise.all()The Promise. all() method accepts an iterable of promises as an input and returns a single Promise that fixes to an array of the input promises' results.const promise1 = Promise.resolve(5); const promise2 = 54; const promise3 = new Promise((resolve, reject) => {   setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2, promise3]).then((values) => {   console.log(values); });Promise.any()Promise.any() takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise. If there are no promises in the iterable fulfill, then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors. This method is the opposite of Promise.all().const promiseand1 = Promise.reject(0); const promiseand2 = new Promise((resolve) => setTimeout(resolve, 100, 'Large')); const promiseand3 = new Promise((resolve) => setTimeout(resolve, 500, 'Small')); const promises = [promiseand1, promiseand2, promiseand3]; Promise.any(promises).then((value) => console.log(value));Using Async / Await for handling asynchronous codeInitial versions of Node didn't have the Node architecture single-threaded and asynchronous. The intricacy with this kind of code is that this kind of position can create many problems, and the code can get messy when there are several functions, and this situation is called callback hell.Promises and function chaining were introduced to overcome this situation.By Node v8, the async/await feature was finally wheeled out to deal with Promises and function chaining. The functions were not necessarily required to be chained after another; they simply await the function that returns the Promise. But the async function is needed to be declared before awaiting a function returning a Promise.Examples of Async / AwaitThe code looks like the following.async function testfun1(req, res){   let resp1 = await request.get('http://localhost:8080');     if (resp1.err) { console.log('error');}     else { console.log('Response Fetched'); }ExplanationThe code above essentially demands the JavaScript engine driving the code to wait for the request.get() function to accomplish before moving on to the next line to execute it. The request.get() function returns a Promise for which the user will await. Before async/await, if it is required to check that the functions are running in the desired sequence, i.e. one after the another, chain them one after the another or register callbacks. Code review and understanding become comfortable with async/await, as observed from the above example.Error handling in the case of async / awaitFormulating exceptionsAn exception is built using the throw keyword:throw valueAs soon as the above line executes, the standard program flow stops and the control is held back to the most imminent exception handler.Typically, in client-side code, a value can be any JavaScript value, including a string, a number or an object.In Node.js, we don't throw strings; we throw Error objects.Error objectsAn error object is an object that is either an instance of the Error object or extends the Error class provided in the Error core module:throw new Error('Out of Mall') OR class NoPersoninMallError extends Error {   //... } throw new NoPersoninMallError()Exception handlingAn exception handler is a try/catch statement.Any exception created in the lines of code in the try block is as below:try { //code would be written here. } catch (e) {} //e is the exception value. Error handling with async/awaitUsing async/await, the errors can be caught as below:async function AnyFunction() {   try {     await anotherFunction()   } catch (err) {     console.error(err.message)   } } ConclusionNode.js is more beneficial to the developers in association with its disadvantages. What’s more important is that it has extended the JavaScript applications area and can be used for both front-end and back-end servers.Node.js is, without a doubt, one of the more exciting technologies in use today, and it has grown into one of the most popular platforms used for web applications, services, and desktop apps. With time, more and more business organizations have opted to use Node.js and are consistently getting positive results.
1690
What Are Callbacks in Node.JS

The callback is an asynchronous equivalent for a f... Read More

How to Work with Lists in React.Js

React is a JavaScript library designed for developing quick and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library accountable only for the application's view layer. In Model View Controller (MVC) architecture, the view layer is liable for the app's looks and feel. React was founded by Jordan Walke, a software engineer at Facebook.Why has React gained popularity?React's fame today has overshadowed that of all other front-end development frameworks. Here is why:1. Simple creation of powerful and dynamic applications:React makes it more comfortable to create powerful and dynamic web applications because it demands less coding and contributes more functionality than JavaScript, where coding often gets complex instantly.2. Enhanced performance: React utilizes Virtual DOM, thereby creating web applications quicker. Virtual DOM matches the components' previous states and updates only the Real DOM items that were modified, instead of refreshing all of the features again, as traditional web applications do.  3. Reusable segments: Components are the building blocks of any React application, and a single app typically consists of various ingredients. These segments possess their philosophy and controls, and they can be reused everywhere in the application, which in turn dramatically lessens the application's evolution time. 4. Unidirectional information flow: React accompanies a unidirectional data flow. This means that when creating a React app, developers often nest child components within parent components. Since the data moves in a single direction, it becomes simpler to debug errors and understand where an obstacle occurs in an application at the moment in question. 5. Light learning curve: React is simple to learn, as it primarily combines basic HTML and JavaScript concepts with remarkable helpful additions. Still, as is the problem with other tools and frameworks, you have to spend some time to get a decent understanding of React's library. 6. Develop web and mobile apps: We already know that React is utilized to build web applications, but that's not the only thing it can do. There is a framework named React Native, procured from React itself, that is hugely successful and is employed for creating mobile applications. So, in truth, React can be utilized for making both web and mobile applications. 7. Dedicated tools for smooth debugging: Facebook has delivered a Chrome extension that can be utilized to debug React applications. This allows quicker and easier ways of debugging React web applications. The earlier reasons support the React library's reputation, and it is being utilized by many organizations and businesses. Introduction to ‘key’ attribute and its importance Keys support React to identify which items have been modified, are combined, or are eliminated. Keys should be assigned to the elements inside the array to provide the elements with a steady identity. React keys are essential when working with dynamically created components or when your lists are altered by users. Setting the key value will keep components unique, later after the conversion. Using KeysLet's dynamically generate Content elements with a unique index(i). The mapfunction() will generate three elements from our data array. Since the key-value needs to be unique for every aspect, we will assign i as a key for each built element. import React from 'react';  import ReactDOM from 'react-dom';  class App extends React.Component {     constructor() {        super();          this.state = {           data:            [              {                 component: 'The first element generated',                 id: 7              },              {                 component: 'The second element generated',                 id: 8              },              {                 component: 'The third element generated,                 id: 9              }           ]        }     }     render() {        return (                                          {this.state.data.map((dynamicComponent, i) = )}                                 );     }  }  class Content extends React.Component {     render() {        return (                         {this.props.componentData.component}              {this.props.componentData.id}                   );     }  }  ReactDOM.render(, document.getElementById('app'))Output  component: 'The first element generated',   id: 7   component: 'The second element generated',   id: 8   component: 'The third element generated,   id: 9 Lists are everywhere Lists are handy when it comes to developing the UI of any website. Lists are mainly used for displaying menus on a website, for example, the navbar menu. In conventional JavaScript, we can use arrays for creating lists. We can produce lists in React in a similar manner as we do in standard JavaScript. Creating a list of elements in ReactLet us now generate a list in React. Render the list in the below code as an unordered list in the browser rather than only logging in to the console. We will traverse the list using the JavaScript map() function and update elements to be embedded between   elements. Finally we will enclose this new list within   elements and render it to the DOM. import React from 'react';  import ReactDOM from 'react-dom';  const numbers = [2,3,4,5,6];  const updatedNums = numbers.map((number)=>{      return {number};  });  ReactDOM.render(                {updatedNums}      ,       document.getElementById('root')  ); The above code will be shown list as below  2  3  4  5  6 1. react native flatlist: This is a convenient react utility component designed to simplify handling the rendering list with ease. It can take grouping, sorting, filtering, searching, sorting, paginating, styling with very simple props. Instate Assure that react and react-dom version 16.8.0+ should be installed npm install flatlist-react Quick Start Take into consideration the following list passed to component PeopleList: // App.jsx people = [ {firstName: 'John', lastName: 'Correia', info: {age: 25}}, {firstName: 'Tim, lastName: 'Doe', info: {age: 18}}, {firstName: 'Joe', lastName: 'Doe', info: {age: 36}}, {firstName: 'Michelle', lastName: 'Carvalho', info: {age: 28}}, {firstName: 'Kathy, lastName: 'Correia', info:{age: 29}}, {firstName: 'Dave', lastName: 'Quichote', info: {age: 35}}, {firstName: 'Maria', lastName: 'Correia', info: {age: 0}}, {firstName: 'Brian', lastName: 'Gonzales', info: {age: 85}}, {firstName: 'Anna', lastName: 'Correia', info: {age: 34}} ] Now inside the component file, a function renderPerson would pass to renderItem: // PeopleList.jsx import FlatList from 'flatlist-react'; renderPerson = (person, idx) => { return ( {person.firstName} {person.lastName} ({person.info.age}) ); } return ( List is empty!} sortBy={["firstName", {key: "lastName", descending: true}]} groupBy={person => person.info.age > 18 ? 'Over 18' : 'Under 18'} /> )2. react dropdownlistSimple Dropdown inspired by react-select Why The default HTML select component is hard to style Fulfills requirement of grouped menus if Advanced select is required, check react-select Basic usage of react-dropdown  import Dropdown from 'react-dropdown'; import 'react-dropdown/style.css'; const options = [ 'one', 'two', 'three' ]; const defaultOption = options[0]; ;3. react native list view  Create a list in React Native. We will import the List in our Home component and show it on screen. App.js  import React from 'react'  import List from './List.js'  const App = () => {     return (             )  }  export default App Use map() method as this will iterate over various items and render each one. List.js  import React, { Component } from 'react'  import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'   class List extends Component {     state = {        names: [           {              id: 0,              name: 'Ben',           },           {              id: 1,              name: 'Susan',           },           {              id: 2,              name: 'Robert',           },           {              id: 3,              name: 'Mary',           }        ]     }     alertItemName = (item) => {        alert(item.name)     }     render() {        return (                         {                 this.state.names.map((item, index) => (                     this.alertItemName(item)}>                                                 {item.name}                                                            ))              }                   )     }  }  export default List  const styles = StyleSheet.create ({     container: {        padding: 10,        marginTop: 3,        backgroundColor: '#d9f9b1',        alignItems: 'center',     },     text: {        color: '#4f603c'     }  }) 5. material ui list   Material-UI is a customizable and straightforward component library to build faster, beautiful, and more accessible React applications. Follow your design system, or start with Material Design. import './App.css'; import {Button} from '@material-ui/core'; //importing material ui component function App() {  return ( Press me //using the material ui component in our project ); } export default App; Refresh browser and will see a button with the words press me.6. react todo listCreate populating todo list items.import React, { Component } from "react"; export default class FormTodo extends Component { state = { inputValue: "", todos: [], }; inputChange = (e) => { this.setState({ inputValue: e.target.value, }); }; buttonSubmit = (e) => { this.setState({ // todos: [this.state.inputValue], todos: [this.state.inputValue, ...this.state.todos], inputValue: "", // input field clearing on submitting }); }; render() { return ( Add task {this.state.todos.map((todo) => ( {todo} ))} ); } }Simple Reactjs List with Simple ArrayDisplay data of a simple array having a list of countries in it. We will use .map to render the item in React. import React from "react";   function App() {  const CustomerName= [  { name: "Ram" },  { name: "Shyam" },  { name: "Mahendra" },  { name: "Vikrant" },  { name: "Ramesh" },  { name: "Mahesh" }  ];  return (    {CustomerName.map((data) => (  {data.name}  ))}    );  } Display Nested Lists in ReactWe needed to show data in nested form. import React from 'react';  function App() {  const users = [  {  id: "01",  name: "John Manchak",  email: "sincerity@may.biz",  zipcode: 14112  },  {  id: "02",  name: "Jim Howell",  email: "Shanni@melissa.com",  zipcode: 15111  }  ];   const finalArray = [users, users];  return (      {finalArray.map((nestedItem, i) => (    List {i}   {nestedItem.map(data => (    {data.name}  {data.email}  {data.zipcode}    ))}    ))}      );  } Building a collapsible listWe can create a simple collapsible component in react js. We will be passing the heading as a property to the element, and the .jsx that gets wrapped inside the component would be toggled on clicking the header. class Collapsible extends React.Component {  constructor(props){  super(props);  this.state = {  open: false  }  this.togglePanel = this.togglePanel.bind(this);  }  togglePanel(e){  this.setState({open: !this.state.open})  }  render() {  return (  this.togglePanel(e)} className=’header’>  {this.props.title}  {this.state.open ? (    {this.props.children}    ) : null}  );  }  }  /* CSS */  .header{  cursor: pointer;  border: solid 1px #f2f2f2;  padding: 15px;  background-color: #0089CC;  color: #FFF;  font-family: verdana;  }  .content{  cursor: pointer;  border-left: solid 1px #f2f2f2;  border-right: solid 1px #f2f2f2;  border-bottom: solid 1px #f2f2f2;  border-radius: 0 0 5px 5px;  padding: 15px;  font-family: verdana;  font-size: 14px;  } Sorting listsReactJs can create sorting lists as below: import { SortableItem, swapArrayPositions } from 'react-sort-list';  import { useState } from 'react';  let todos = [    {id: 1, title: "TaskItem 1"},    {id: 2, title: "TaskItem 2"},    {id: 3, title: "TaskItem 3"}  ]  function App() {    const [todoState, setTodoState] = useState(todos);    function swap(dragIndex, dropIndex) {      let swappedTodos = swapArrayPositions(todoState, dragIndex, dropIndex);      setTodoState([...swappedTodos]);        }    return (            {todoState.map(function (todo, index) {            return (                               {todo.title}                           )        })}          );  }  export default App;Inserting / Removing an element from the listIn ReactJs we can add or remove dynamically from the list as below: var App = React.createClass({    getInitialState : function() {      return (        {          fruits : {            'fruit-1' : 'orange',            'fruit-2' : 'apple'          }        }       )      },      addFruit : function(fruit) {        //create a unike key for each new fruit item        var timestamp = (new Date()).getTime();        // update the state object        this.state.fruits['fruit-' + timestamp ] = fruit;        // set the state        this.setState({ fruits : this.state.fruits });       },       removeFruit : function(fruitKey) {        // update the state object        delete this.state.fruits[fruitKey];        // set the state        this.setState({ fruits : this.state.fruits });        //alert(fruitKey);       },       render: function() {        return (                                                                 );        }       });       var FruitList = React.createClass({        render : function() {          return (                                          {                  Object.keys(this.props.fruits).map(function(key) {                    return {this.props.fruits[key]}                  }.bind(this))                }                                       );          }        });        var AddFruitForm = React.createClass({          createFruit : function(e) {            e.preventDefault();            //get the fruit object name from the form            var fruit = this.refs.fruitName.value;            //call the addFruit method of the App component            //to change the state of the fruit list by adding a new item            if(fruit.length > 0) {              this.props.addFruit(fruit);            }            //reset the form            this.refs.fruitForm.reset();          },          render : function() {            return(                                                                    Fruit Name                                                                      Add Fruit                          )          }        });        var RemoveFruitForm = React.createClass({          selectFruittoRemove : function(e) {            var fruit = e.target.value;            //get the fruit object name from the form            //var fruit = this.refs.removeFruitSelect.value;            //call the addFruit method of the App component            //to change the state of the fruit list by adding a new item            this.props.removeFruit(fruit);            //reset the form            this.refs.removeFruitForm.reset();          },          render : function() {            return(                                                               List of Fruits                                      Remove a fruit                    {                      Object.keys(this.props.fruits).map(function(key) {                        return {this.props.fruits[key]}                      }.bind(this))                    }                                                                            )          }        });        React.render(          ,          document.getElementById('app')        ); Building a newsfeed componentEssentialsA basic understanding of JavaScript (ES6) and React is required. The following needs to be installed on your machine: Node.js (v6 and above) Npm Create a new empty directory news-app and run npm init -y from within it to initialize the project with a package.json file.Set React app We will bootstrap our React application with create-react-app.  command: npm install -g create-react-app Once the installation process is completed, run the command below to set up your React application: create-react-app client Install the other dependencies; we will need to build the app frontend. npm install pusher-js pushid pushid helps us generate a random ID string which we’ll be needing when creating the news feed. Run yarn start to launch the development server once all the dependencies have been installed. Application logicimport React, { Component } from 'react';     import Pusher from 'pusher-js';     import pushid from 'pushid';     import './App.css';     class App extends Component {       state = {         newsItems: [],       }       componentDidMount() {         fetch('http://localhost:5000/live')           .then(response => response.json())           .then(articles => {             this.setState({               newsItems: [...this.state.newsItems, ...articles],             });           }).catch(error => console.log(error));         const pusher = new Pusher('', {           cluster: '',           encrypted: true,         });         const channel = pusher.subscribe('news-channel');         channel.bind('update-news', data => {           this.setState({             newsItems: [...data.articles, ...this.state.newsItems],           });         });       }       render() {         const NewsItem = (article, id) => (           {article.title}         );        const newsItems = this.state.newsItems.map(e => NewsItem(e, pushid()));         return (                       Live Bitcoin Feed             {newsItems}                   );       }     }     export default App;   Application styles Change its contents to look like this:  .App {       width: 100%;       max-width: 700px;       margin: 0 auto;     }     .App-title {       text-align: center;     }     .text-input {       width: 100%;       border: 1px solid #f7f7f7;       padding: 10px;     }     .text-input:hover {       box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.25);     }     .news-items {       list-style: none;       padding-left: 0;     }     .news-items li {       margin-bottom: 10px;     }Server Setup Let’s install a simplistic Express server to fetch news items from and trigger real-time updates with Pusher. npm install express cors dotenv newsapi Pusher --save Create a new server.js file and open it up in your text editor. Add the following code to server.js: require('dotenv').config({ path: 'variables.env' });      const express = require('express');      const cors = require('cors');      const Pusher = require('pusher');      const NewsAPI = require('newsapi');      const app = express();      const pusher = new Pusher({        appId: process.env.PUSHER_APP_ID,        key: process.env.PUSHER_APP_KEY,        secret: process.env.PUSHER_APP_SECRET,        cluster: process.env.PUSHER_APP_CLUSTER,        encrypted: true,      });      const newsapi = new NewsAPI(process.env.NEWS_API_KEY);      const fetchNews = (searchTerm, pageNum) =>        newsapi.v2.everything({          q: searchTerm,          language: 'en',          page: pageNum,          pageSize: 5,        });      app.use(cors());      function updateFeed(topic) {        let counter = 2;        setInterval(() => {          fetchNews(topic, counter)            .then(response => {              pusher.trigger('news-channel', 'update-news', {                articles: response.articles,              });              counter += 1;            })            .catch(error => console.log(error));        }, 5000);      }      app.get('/live', (req, res) => {        const topic = 'bitcoin';        fetchNews(topic, 1)          .then(response => {            res.json(response.articles);            updateFeed(topic);          })          .catch(error => console.log(error));      });      app.set('port', process.env.PORT || 5000);      const server = app.listen(app.get('port'), () => {        console.log(`Express running → PORT ${server.address().port}`);      }); Once the /live endpoint is connected, news articles about bitcoin are regained from newsapi.org and transmitted back to the client.Begin the server by running node server.js from the root of your project directory. At this detail, news feed updates in real-time. Conclusion  React.js is a very new but also established library to make reusable view components that are encapsulated, sharable and easy to maintain. Many companies are using it in their production environments. The community is very active and extends React.js with new functionality on a daily basis. Learning React can make a world of difference to your career. React.js experts are highly sought after by established companies, to build user interfaces and help in the transition from old-fashioned technologies to one of the hottest new view libraries currently available. 
5642
How to Work with Lists in React.Js

React is a JavaScript library designed for develop... Read More

What’s New in Leading SAFe® 5.0

The global SAFe® summit, organized by Scaled Agile Inc. has declared a new variant of the Scaled Agile Framework. The new, simplified version of the model features business activity, focusing on providing a positive customer experience and expanding the critical aspect of portfolio management. SAFe® has added more clarity, structure, and direction. This post attempts to provide an overview of some major changes in SAFe® 5.0.  This new release is intended to extend SAFe® to encompass the complete enterprise and enable improved business activity. This post attempts to provide an overview of some major changes in SAFe® 5.0.  Important Highlights of SAFe® update  Gives the big picture for better features, flow, and continuous delivery   Developing value streams patterns supports model around the request from customers  Applying SAFe® to hardware improvement accelerates the delivery of cyber-physical systems  New direction and guidance around DevOps technical skills and tools for continuous delivery pipeline  More comprehensive direction for implementing Lean-Agile methods to business domains supports business agility  Integrated participatory budgeting promotes a dynamic and collaborative method of allocating funding to value streams  New designs, patterns, and behaviors for teams and ARTs simplifies their values  Incremental updates to SAFe® 5 will guarantee it stays current with new and evolving business and technology trends.WHAT’S NEW? Below are the highlights of what’s new in SAFe® 5.0. Customer focus in SAFe® 5.0 One of the primary changes is to focus on a customer-centric approach. Version SAFe® 5.0’s motto is to give a satisfactory experience to the customer. SAFe® recommends focusing more on what the customer is getting from the business and helps them focus on decision-making. The most important ingredient is revamped core competency, which focuses on understanding the needs of customers, setting customer lifetime value, and then building products that are customer-centric. New Big Picture The below graphic incorporates the contents of SAFe®, comprising a sketch of-- Essential SAFe®, Large Solution SAFe®, Portfolio SAFe®, and Full SAFe® and the consolidated updatesSource LinkConcentrate/ Focus on Business Agility.  Business Agility is the ability to face and grow by immediately responding to buoyant market conditions, varying customer needs, and emerging technologies. It requires that everyone is committed to delivering solutions—business and technology leaders, development, IT operations, legal, marketing, finance, support, compliance, security, and others—use Lean and Agile applications to continuously deliver innovative, high-quality products and services quicker. It is the differentiator that will determine the winners and failures in the digital economy. SAFe® defines business agility as “The capacity to compete and succeed in the digital age by reacting quickly to market fluctuations and opportunities with innovative business resolutions. It expects all those concerned in furnishing solutions i.e. business and technology leaders, development, IT policies and procedures, law, marketing, finance, maintenance and support, compliance, security/ protection from hackers, and others – to apply lean and agile methods to continuously provide innovative, quality products and services quicker than the competition.” How will business agility solve the problem? Enterprises start as a customer-centric network. As the organization progresses, the entrepreneurial network moves adjacent to the newly constituted “hierarchical arrangement” which is anticipated for the organization to mature. As the hierarchy grows to accomplish the organization’s revenue and growth needs, it begins to clash with the entrepreneurial network, which leads to network failure and customer-centricity getting lost in between. Nonetheless, this allows organizations to develop, but if a change in technology or customer requirement arises, companies fail to react and change. Instead of discarding the current system, a secondary system “SAFe® 5.0 Business Agility” could be executed which allows concentrating more on formulating value streams, not just departments. New SAFe® Overview SAFe®'s seven center capabilities encourage business readiness. The visual underneath shows an unmistakable image of SAFe®'s Seven Core Competencies of the Lean Enterprise and furthermore shows their 21 measurements that assist business readiness.   Execution competencies are displayed on the left, while the support strategy competencies are on the right. The Agile-Lean Leadership competency which is the foundation is in the bottom middle. The customer is prominently emphasized in the middle as the focal feature for all the competencies. Measure and Grow at the top right is a suggestion of the importance of cyclic self-assessments to track the organization’s journey towards the principles and practices that facilitate business agility.  Source LinkMeasuring Business Agility The SAFe® framework now includes Business Agility Assessment that empowers organizations to estimate their level of business agility and get support on expediting growth. The assessment incorporates the ratings of organizations according to various standards and levels within each core competency. Outcomes from this evaluation, represented by the radar below, can be represented as a baseline. As such, these can support organizations to determine the current status and know which fields to concentrate on for enhanced growth. It can help to prioritize for maximum accomplishment on the path to business agility. TWO NEW COMPETENCIES SAFe® 5.0 acquaints us with two new abilities-- Continuous Learning Culture, and Organizational Agility. Both of the skills are depicted in detail below. Continuous Learning Culture   The Learning Culture competency outlines a set of values and methods that inspire people and the complete organization to upgrade knowledge, skill, performance, and innovation. The aforementioned culture is achieved by encouraging the organization to upgrade knowledge, executing constant improvement, and promoting a culture of innovation.   The image below outlines the three dimensions of a continuous learning culture:Learning Organization – Employees would desire to upgrade themselves at each level and therefore the organization transforms and can endure an ever-changing world.  Innovation Culture – Employees are encouraged and empowered to explore and accomplish original concepts that expedite future value delivery.  Constant Improvement – Every part of the enterprise concentrates on continuously enhancing its solutions, products, and methods. Organizational Agility  The Agility competency of an Organization defines how Lean-thinking and Agile teams optimize their business processes, amplify the approach with clear and definitive new consignments, and immediately benefit the organization as expected to capitalize on new possibilities and opportunities. This new article explains the three dimensions of organizational agility:  Lean and Agile Teams – Teams that are connected with solution delivery are trained in Lean and Agile systems and know how to adopt and exemplify the values, policies, and practices.   Lean operations business team – Teams follow Lean principles to concede, map and continuously improve the business systems that support the business products and services.   Strategy Flexibility – The enterprise is manageable and flexible enough to continuously sense the market, and immediately adjust tactics when required.FIVE COMPETENCIES RESTRUCTURED Team and Technical Agility  The Technical Agility team outlines the Lean-Agile principles and methods that high-performing Agile teams use to provide high-quality resolutions for customers. The outcome is improved productivity, more stability, quality, faster time-to-market, and quick anticipated delivery of value. This competency has been written and is classified into the following dimensions: Agile TeamsHigh Performance of the cross-functional teams ensures competency by employing efficient Agile principles and practices.Agile Unit TeamsAgile teams function within the context of a SAFe® Agile Release Train (ART), a long-lasting, team of Agile teams that bestows a shared insight and direction and is ultimately accountable for delivering solutions.  Built-in QualityAgile teams execute Agile iterations to provide high-quality, well-designed recommendations that help current and prospective business requirements.Agile Product Delivery  Agile Product Delivery is a customer-centric approach to determine, develop, and deliver a constant stream of products and services that are of value to customers and users. This supports the organization to provide solutions that delight customers, reduce development costs/ risk, and reduce competition.  DevOps and Release competency has been combined into a couple of dimensions of Agile Product Delivery as shown in the Figure below:Customer-centric Thinking – Customer centricity puts the customer at a locus and uses design reasoning to ensure that the resolution implemented will be useful, possible, achievable, and can sustain in any circumstances.  Acquire on-demand and Declare on Request– Developing on flow enhances control in product development.  Releasing the value engagements to customers in segments would help customers to satisfy their requirements.  DevOps and the Continuous Delivery – DevOps and the Continuous Delivery Pipeline create the foundation that assists organizations to deliver excellence, in cumulative parts or in segments, at any point to satisfy consumer and market requirements. Lean Portfolio Management  The Lean Portfolio Management aligns strategies and achievements by implementing Lean methods approaches/ strategies, Agile portfolio methods, and governance. These collaborations deliver organizations the expertise to meet existing commitments and enable innovation.This competency has been revised and is classified into the following dimensions:Strategy & Investment Funding ensures the entire portfolio is aligned and financed to formulate and support the solutions expected to adhere to business targets.    Agile Portfolio Operations encourage decentralized program performance and promote operational excellence.    Lean Governance accommodates decision-making of spending, auditing, forecasting engagements, and measurement.Organization Solution Delivery  The Organization Solution Delivery competency shows how to apply Lean-Agile principles and methods to product specification, expansion, deployment, accomplishment, and progress of advanced software applications, networks, etc The Business and Lean Engineering Systems competency has been renamed as Enterprise Solution Delivery and it incorporates the following dimensions: Lean Solution and Systems   Engineering applies Lean-Agile practices to manage and coordinate all the activities needed to execute, test, deploy, evolve, and sequentially decommission these systems.   Coordinating Suppliers   Suppliers are coordinated and aligned to a set of value streams. This uses coordinated vision, backlogs, and roadmaps with common program Increment points.   Continually Evolve Live Systems assure large systems, and their growing pipeline supports continuous delivery. Lean-Agile Leadership  The Lean-Agile Leadership competency specifies how Lean-Agile Leaders manage and maintain organizational change by empowering individuals and teams to reach their highest potential. Adopting a Lean-Agile mindset results in more engaged employees, increased productivity and innovation, and successful organizational change.  The Lean-Agile leadership was revised and is grouped into the following dimensions:Set by example – Leaders achieve earned prestige by inspiring the team to incorporate the leader’s example into their own personal development journey.  Principles and Mindset – Embedding the Lean-Agile approach of working in their ideas, choices, acknowledgments, and activities, leaders model the required norm throughout the organization.  Managing Change – Leaders lead the transformation by designing the environment, preparing the people, and providing the necessary resources to realize the aspired outcomes. CUSTOMER FOCUSED DESIGN THINKING The Customer Centricity mindset has extended its focus to the mechanisms and systems that are aimed at resolving issues that customers face.  Customer Centricity The customer-centric organization conducts market research to create actionable items of the problems that customers face, the solution specifications, and the solutions required to resolve issues. FOR BUSINESS TEAMS SAFe®  Team of teams in SAFe® acts as an agile release train and it presents value to the organization. They adopt the Lean and Agile values, principles, and practices that are relevant to their responsibilities and adjust their existing processes accordingly. The Agile Release Train (ART) is a long-lived team of Agile teams, which, accompanied by different stakeholders, incrementally develops, delivers, and where applicable operates one or more solutions in a value stream. ARTs comprise cross-functional teams and possess all the abilities—software, hardware, firmware, and others—needed to define, implement, test, deploy, release, and where applicable, operate solutions.ARTs operate on a set of common principles:  If a Feature misses a timed departure and is not planned in the current PI, it can be taken in the next one.  Each train delivers a new increment every two weeks.  Teams on the train are synchronized on the related PI of 8 – 12 weeks and have common Iteration start/end dates and duration.  Each ART estimates how much can be delivered in a PI.  Agile Teams welcome the ‘Agile Manifesto’ and SAFe® Core Values and Principles. They apply Scrum, Extreme Programming (XP), Kanban, etc Built-In Quality practices.  Most people in ART are committed full-time to the train. The ART plans work periodically mostly face-to-face PI Planning events.  An Inspect and Adapt event is held at the end of every PI.  Teams and management identify backlog items via a structured, problem-solving workshop.  ARTs apply flow and synchronization to better accomplish the internal variability of investigation and improvement.  NEW SAFE® IMPLEMENTATION ROADMAP The Scaled Agile Framework for enterprises contributes integrated, well established scaling patterns that have benefited many organizations around the world to solve their business obstacles associated with speed, multiple teams' alignment, flexibility & quality, and improvement with successful Agile delivery.    The SAFe® Roadmap outlines the levels of the organization and implements SAFe® in an arranged, stable, and successful fashion. While adopting SAFe® would vary based on circumstances, the Implementation Roadmap offers insight into a fairly common implementation pattern. The roadmap has been developed by proven change management strategies and the experience of hundreds of global enterprises that have adopted SAFe®.   The SAFe® Implementation Roadmap includes 12 critical moves for the successful embracing of Lean-Agile principles and mindset and their applicability throughout the organization.WHAT ARE THE CHANGES FROM 4.5 TO 5.0  Below are the diverse levels in SAFe® 4.5 and SAFe® 5.0. SAFe®  5.0 Level  SAFe® 5.0 is the most advanced level that comes with an important update to the last version 4.5. It comes with two extra competencies i.e. Lean Enterprise and Business Agility. SAFe® 5.0 with extra two competencies also focuses on core competencies of SAFe® 4.5 that includes Technical and Team Agility, Release on Demand and DevOps, Lean Systems Engineering and Business Solutions, Lean Portfolio and Lean-Agile Leadership.  SAFe®  4.5 Level Four levels are incorporated in this SAFe® implementation-- they are Portfolio, Value Stream, Program, and Team. It is mainly used for resolutions that require several professionals to create, deploy, manage and maintain softwareWHAT DOES VERSION 5.0 IMPLY Scaled Agile Framework inspires realization within organizations that there is a need to transform development teams. They require to transform organization-wide in order to compete in today’s landscape. The focus has now whirled towards full business agility. In reference to SAFe® 5.0, Business Agility empowers organizations to capitalize on rising opportunities by allowing people to make quick settlements, designate money, and adjust the right people to work.  SAFe® confirms that a framework alone is not sufficient to achieve a successful transformation; the true difference makers are the talent i.e., leaders and teams of the organization. Globalization, fast-moving markets and the unprecedented pace of technological innovation provokes organizations to transform to survive. But their current business models, organizational hierarchy, and technology infrastructure often hold back organizations from transforming fast.  Important Highlights of SAFe® 5.0:  Focus on customer centricity and design thinking empowers the organization to recognize the problem and design the right solution.  New Measures and guidance help the organization circumscribe its current state of business agility and recognize tactical steps to enhance economic outcomes and reach its desired state.  Continuous Learning Culture competency provides a collection of values and practices that inspires everyone in the enterprise to continuously learn and innovate with mutual cooperation.  Organizational Agility helps teams optimize their enterprise processes, develop strategies with clear commitments and quickly accommodate to realize new opportunities.  SAFe® 5.0 allows teams to engage in delivering and supporting innovative business resolutions.  It organizes and helps enterprise regulate their development efforts around the full, end-to-end value flow. CONCLUSIONSAFe® 5.0 brings the significant modifications that were required for organizations to improve but also not lose core focus on customers. With business agility, organizations can now concentrate on generating value streams for their overall maturity and growth rather than focus on each department individually. The two new core competencies will empower the organizations to generate a learning culture to encourage continuous improvement in innovative solutions, performance, and growth and also modify or accommodate artifices according to the variation in market trends. Overall, it helps in bringing back the focus without losing it in the hierarchical structure of organizations.
7336
What’s New in Leading SAFe® 5.0

The global SAFe® summit, organized by Scaled Ag... Read More

The Best Product Development Process

What Is Product Development? Product development relates to the creation of a new product that has some benefit; up-gradation of the existing product; or improvement of the production process, method, or system. In other words, it is all about bringing a change for the better in the present goods or services or the mode of production.  Product development includes the following elements:Creation and Innovation pave the process for new discoveries and the creation of a new product that offers benefits to the consumers. Amendment of the existing products is essential to enhance the past products and to attain perfection. Improvement of the existing production process, methods, and practices helps give customers an improved experience. It is cost-efficient for the organization too. For Example; Apple CEO Steve Jobs envisioned an idea of using a touch screen to interact with a computer, which would allow him to directly type onto the display, instead of using a stylus. This idea of a touch screen was first implemented for the first iPhone that was launched in 2007 in the US. Apple, with its new product development, revolutionized the way we use mobile gadgets.Why Is It So Important to have a Product Development Process? Product development is the procedure for the successful development of new products or adding new features to the current product. In business terms, the product development policy provides a skeleton that aids enhancement of the performance and quality of products.  The approaches outlined below can bring up scores of advantages to help and expand the business in today’s contentious market. Control over productThe development of a product without a decent approach is quite a precarious challenge. To manage and to be sure of success, it is necessary to plan the development of your products or services and this is what the business or organization requires. The planning would help in fulfilling business goals. Enhanced performanceSeveral times, even after spending thousands of dollars on promotion or marketing the product, a business owner faces setbacks because of poor quality of the product. Hence, it is important to monitor the production and other processes to preserve a record of wrongdoings and improve the same. Reduce costCreating and implementing new products leads to additional cost to the company. The owner has to bear a huge cost in the primary stages of product development, but after the execution process, it is noticed that there is a decrease in product development cost.The History of Product Development Processes Product improvement is closely tied to creativity, invention, and insight—and follows the vision of an idea. For example: the present-day Gas stove is the consequence of some ancient human's insight that a fire is created by rubbing two stones together: the rest was product development. According to Michael McGrath (in Next Generation Product Development), keen focus on the development process began late in the 19th century. McGrath divides the time since into "generations" of product development importance. First ending in 1950s, the focus was on commercialization of discoveries; in the second, formalization of product development as a process began, and this lasted until the 1980s. In the third "generation" of product development, corporate management concentrated on getting products to market faster. In the 21st century, according to McGrath, stress had shifted to R&D-based development. All types of strategies to product development proceed to exist side-by-side. As in gambling, no "method" ensures success.Product Development Process Models There are different software development life cycle models defined which are helpful in designing the software development process.  Some important and popular SDLC models supported in the industry are as follows: Waterfall Process Model Iterative Process Model Spiral Process Model V Process Model Big Bang Process Model Agile Process Model RAD Process Model Prototyping Process Models Waterfall ModelThe Waterfall Model is the traditional Process Model. It is considered as a linear-sequential life cycle model. Waterfall model at each stage must accomplish the next phase before and there should be no overlapping phases.Iterative Process Model  Iterative process starts with an easy implementation of a subset of the software requirements and iteratively improves the evolving versions until the full system is implemented.  With every  new iteration, new design modifications are produced and new functional capabilities are added.  Spiral Process Model The spiral model has four phases. A software project repeatedly passes through these phases in iterations called Spirals i.e. Identification, Design, Construct or Build and Evaluation and Risk Analysis. V Process Model The V-model is an SDLC model where execution of processes occurs in a sequential manner in a V-shape. It is also acknowledged as Verification and Validation model. The V-Model is an extension of the waterfall model. Big Bang Process Model The Big Bang model is an SDLC model where we do not follow any definite process. The development begins with the required money and efforts as the input, and the output is the software developed which may or may not be as per customer demand. Agile Process Model Agile product development life cycle promotes frequent inspection and adaptation. The methodologies rely on the experience of small teams and teamwork to address any changes and promote trusted customer collaboration. Agile product development methods begin things in small increments. Iterations are small; typically of one to four weeks duration. RAD Process Model The RAD (Rapid Application Development) model is based on prototyping and iterative development with no special planning involved. The method of drafting the software itself involves the planning required for producing the product. Software Prototype Process Model The Software Prototyping refers to building software application prototypes which illustrate the functionality of the product under development, but may not truly hold the precise logic of the original software.What Is the Product Development Lifecycle? The product life cycle is an influential concept in marketing. It defines the stages a product goes through right from its inception to when it is removed from the market. Not all products relinquish the final stage. Some advance and grow while others rise and fail. The main stages of the product life cycle are: Research & development - Researching and developing the product before it is made available for sale in the market Introduction – Driving the product into the market Growth – When sales are expanding at their fastest rate Maturity – Sales are near their highest, but the percentage of growth is slowing down, e.g. new rivals in market or saturation Decline – Final step of the cycle, when sales begin to fallThis can be illustrated by looking at the sales during the time span of the product.What is a New Product Development Process? The product development method is a well-defined series of steps or stages a company uses to achieve its accomplishment of new offerings. Every company develops new product or services, but product development processes vary considerably from one company to another depending on the industry, the product type, whether the product is an incremental improvement or a breakthrough innovation, and the extent to which you focus on product portfolio management. What are the six steps of a traditional new product development process? A typical product development process of this kind has six steps with five gates. Step 1: Product Discovery  Step 2: Definition of Product Step 3: Product Business Case Development  Step 4: Detailed Product Design  Step 5 Validation/Testing of product developed Step 6: Product Launch Step 1: Product Discovery This initial step or stage of the new product development process is where new product ideas originate. A company forms a small team to study the idea and initial draft of the product, perform market analysis, and explore technical and market risk. The concept is the most important step for new products as this is where the most product ideas come from - and this determines the necessity for the development. If the study or product concept is wrong at the early stage, then not only is time wasted but it also increases opportunity cost.    Step 2: Definition of Product This stage encompasses polishing the definition of the product. The team creates the first comprehensive evaluation of the technology, and the market and business features of the new product concept. Developers and managers review and illustrate the important points of differentiation for the new product. If this process is carried out incorrectly, then it can increase time to market or cause the product to misinterpret the needs of the market. Step 3: Product Business Case Development Action supports the organization’s investment in the development of a product by having the team create a comprehensive business plan. This plan comprises exhaustive market research. The team explores the new product and where the intended product fits within it, and also creates a monetary model for the innovative offering that makes presumptions about market share. Step 4: Detailed Product Design The team outlines and assembles a working prototype of the product. In most cases they alpha-test the archetype, working with customers in an iterative manner; receiving feedback, and incorporating it into the prototype. This step in the new product development process is sometimes called Development, and charters the next step, “Validation/Testing.” Step 5: Validation/Testing of product developed Validation and testing mean ensuring the prototype operates as predicted. It also means verifying the product in the opinions of the customers and markets and testing the viability of the financial model of the product. Step 6: Product launch During the product development process, the team realizes everything required to bring the product to market, including marketing and sales plans.   Gate Reviews Each of these six phases finishes within a gate review where the team gives the management specific, pre-defined deliverables, and displays the outcomes required to move on to the next phase of the product development process.The world is moving away from this waterfall product development approach.  It is extremely process heavy and encourages additional interference from Senior Management.Image sourceMinimum Viable Process: A Modern Approach What value does the planning of a new product development bring to customers? Irrespective of its form-i.e. physical or digital, it should be able to solve the customer’s problem. It doesn't matter how complex the problem would be, but it should deliver a high-quality product that brings value to your customers.  In a nutshell, Minimum Viable Product (MVP) is a variant of a software product that has enough functionalities to satisfy the primary needs of the first users and persuade investors to invest money into it. It is not a fully-grown product, but it can nonetheless bring business privileges and has the potential for additional development.  In other words, an MVP is a working prototype that should: Be fast to build Contemplate all resources (money, developers, etc.) on providing customers with real value Create those features that are important for a product to generate value The theory of an MVP was developed by Eric Ries in his book The Lean Startup. The author believes that the most important factor is to focus on business goals and not on the technology which has only secondary importance. Focus on investigating the market and understand the obstacles your potential customers want to solve.  Any product before it is released to the public is a mere theory. Testing in a real-life scenario is important to collect market feedback and then iterate. Each idea, even the most profound one, brings no business value until it is put into practice. An MVP allows you to verify, without making an ample investment of time and money, if the product attracts new customers when launched.  If your product is successful, continue to develop it so it becomes a foundation for a fully-grown product. When MVP needs improvements to be transformed into a product it should be completely reworked. MVP strategy allows you to considerably shorten your time-to-market.  A Modern, Lean Product Development Process Toyota began its journey with lean product development at Toyota Loom Works. Toyota started manufacturing cars. There were differences in manufacturing conditions between Japan and the USA. Toyota had few skilled engineers and had limited prior experience. Car companies in US employed a well-educated work team and benefited from the research and skill-sets of their engineering teams. To tackle this shortfall in knowledge and experience, Toyota escorted an incremental approach to development that built on their current knowledge and this became the basis of the lean systems. Lean Product Development (LPD) is based on lean thinking and lean principles that originally were developed in lean manufacturing. Lean thinking relates to way of thinking and specific practices that maintain less of everything – less resources, less work-in-process, less time, and less cost – to manufacture a physical product, knowledge product or service product.  The five Lean Thinking Principles are: Define and maximize customer value Identify the value stream and reduce waste Make the value-creating steps flow Empower the team Learn and improve Approach: Creating products that delight customers and meet business objectives. Agile methodology versus Waterfall methodology The waterfall project methodology is a traditional pattern for developing engineering systems that were used in manufacturing and construction projects. When executed in software development, specific tasks completed in one phase need to be assessed and validated before moving to the next phase. It is called a linear and sequential approach, where phases flow downward to the next.  The agile project methodology is an example of an incremental model for software development based on principles that focus more on people, decisions, and manageable responses to change. Planning of the whole project is broken down in small increments or short time spans. Each iteration involves the whole SDLC cycle so that a working product is delivered at the end. Some of the distinct differences are: Agile is an incremental and iterative approach; Waterfall is a linear and sequential approach. Agile distributes a project into sprints; Waterfall distributes project into phases. Agile helps to finish many small projects; Waterfall helps to complete one single project. Agile incorporates a product mindset with a focus on customer satisfaction; Waterfall introduces a project mindset with a focus on successful project delivery. Requirements are planned everyday in Agile, while in Waterfall, requirements are adjusted once at the start. Agile enables requirement changes at any time; Waterfall shuns scope changes once the project starts. Testing is done concurrently with development in Agile; testing stage comes only after the build phase in Waterfall. Testing teams in Agile can take part in specifications change; testing teams in Waterfall do not get involved in specification changes. Agile empowers the entire team to manage the project without a project manager; Waterfall requires a project manager who performs an essential role in every phase. Cross-functional teams Cross-functional collaboration involves people from diverse spheres, bringing together their knowledge, expertise, and experience. The major point is “work-interdependency”. Teams have to work together to accomplish results. Cross-team collaboration has become the demand of continually emerging new technologies, with new competitors scrumming, and companies aspiring to stay on top of the game. The success of a cross-functional team depends on several factors, without which a team would be struggling. Highly motivated team members Teams hold responsibility to achieve the mission Open-minded team members Management to support the team No opposing personal goals Clear priorities or direction Adequate communication Cross-functional collaboration can be a great team building measure and can build a more creative atmosphere. The 8 Benefits of Cross-Functional Team Collaboration are: To bring a gulp of creative ideas Engaged employees Spurring innovative ideas Exercising communication skills Developing management skills Chance to get in leadership roles Break stereotype and benefit from diversity Build better team spiritExample: Product development—Agile methodology (Case Study) Below is the case study of a team that faced issues but managed to implement solutions to resolve the issues and delivered output with high standards Issues Products or Services were not delivered on-time. Rework and burden caused employee stress and customer disappointment Lack of clear and well-defined product development methods Excessive projects in the pipeline; team was small, and resources were spread too thin Projects were continuously reprioritized leading to incompetent resource utilization Lack of clarity to project status The absence and missing of key resources led to inefficient product development Lack of strategic management Poor communication and hand-offs between departments Solution implemented Designed a portfolio management system that managed an appropriate and optimal number of projects based on available resources Acquired a scalable and robust lean product development process with integrated lean/agile techniques Implemented cross-functional teams with designated roles and responsibilities Standardized project management processes and enhanced project clarity across the organization Coached the product management team on maturing product strategies and roadmaps Trained and mentored senior management and project team members What made the solution successful? Active and strong senior management buy-in and support played an important role in implementing the solutions at high standards Built organizational knowledge that can be used in other active projects Projects were kept on hold until resources were available Efficient project planning facilitated proper collaboration within cross-functional teams Product development strategies and roadmaps helped the development team Daily stand-up meetings organized helped cross-functional teams to monitor project work, front and center Accommodated implementation timing based on the organization’s capability Effect or Consequence Within a couple of months, important and high priority projects were completed on-time (some early); the client was hence satisfied The client acquired a major contract from the customer due to improved on-time delivery and this, in turn, ensured more business Enhanced communication and coordination across all departments Senior management was competent to evaluate and prioritize the most important projects  Weekly Reports granted visibility to project status Product development and lean/agile processes are now efficiently embedded into the organization The internal conflicts between team members and departments have declined ConclusionNew product development is about transforming new and uninitiated ideas into workable products. This product will be your brainchild, which will provide a contentious advantage and help monopolize the market.The eight stages of product development may seem like a lengthy process, but they are outlined to save time and resources. New product improvement plans and prototypes are experimented with to assure that the new product will meet target market demands and desires. Implement a test launch during the test or marketing stage as a full market launch would be expensive. Finally, the commercialization stage is meticulously planned to maximize product success. A poor launch will affect product sales and could even affect the reputation and vision of the new product.Hence, A Certified Scrum Product Owner® (CSPO®) is one such certification that helps holders become successful product owners by training them on aspects of on-time delivery of high-value releases and maximizing the ROI.
9642
The Best Product Development Process

What Is Product Development? Product development... Read More