Menu

app development

Explore our insightful blog posts that delve deeper into the latest industry trends, best practices, and success stories. Gain valuable knowledge and stay informed about the ever-evolving landscape of digital transformation.

Suggested categories

React Query vs Redux: Making State Management Choices

Do you need Redux to handle the state, or would something like React Query be sufficient? Let’s dive deep into this to choose the appropriate way to manage the state in your next React application.React Query is a popular JavaScript library that simplifies data fetching and state management in React applications. It provides a set of hooks and utilities for managing, caching, and synchronizing data between your application and an external data source, such as an API.The three main features of React Query are:Automatic Caching: It has a revolutionary capacity to cache and invalidate data based on query parameters automatically. In simple terms, it will only make a single request and supply cached outcomes for the next requests.Intuitive API: It simplifies the mutations i.e., tracking the loading, success, and error state of our requests making it more faster and efficient with fewer lines of code.Architecture: React query is intentionally made for quickly fetching data and caching API calls. Thus using React Query for applications that depend mainly on server communications will be an excellent choice.Why do you need React Query?Functionality: It concentrates on data fetching and caching, so the application demands heavy API calls with optimized data fetching and caching, Choosing a React query will be very helpful.Bundle Size: The bundle size of the react query is a bit smaller than compared of redux.Usability: It offers much more straightforward API calls.Performance: React query is faster and lightweight compared to redux and it is more concentric towards data fetching.Community: React query is a new library that gained a strong following and has a growing community.Ecosystem: We don’t need any plugins in the react query.The best use case of React query is when the application heavily relies on data fetching and caching and it is small and simple.Thus React query is the perfect way to manage data fetching and state for small to medium-data-driven applications that focus mainly on efficient and reliable ways of fetching and caching.Author: Vikash Kumar

Learn More >

React Native For Web: Merging the worlds of Mobile and Web

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web.What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and maintenance costs of that can be prohibitive.We have seen how React Native can help you make iOS and Android apps with a shared codebase, without sacrifices in quality. But what about the web? React-native-web is one of the most amazing ideas I’ve stumbled upon in a while. For UI developers, it makes a longtime dream a reality: the ability to create an application that runs on both phones and browsers with just one codebase.React Native as a Universal UI languageYou might be thinking, “Wait! doesn’t React already work on the web?” You wouldn’t be wrong. Unfortunately, traditional React and React Native build on a different set of primitives. React uses <div>, <p> and <input>, whereas React Native uses <View>, <Text> and <TextInput>. There are good historical reasons for this since the building blocks of a web page and of a mobile app are quite different. Nonetheless, it would be great if we could use a single set of shared components.One of the reason what really makes React Native superior to React for creating universal apps — is that React Native is a pure UI language. React Native for Web’s solution is to provide browser-compatible implementations of React Native’s components — meaning, for example, that the <View> of React Native has a DOM-based version that knows how to render to a <div>. While not every React Native component is supported, enough of them are that you could (hopefully) share the majority of your codebase.Nonetheless, it’s possible to translate React Native primitives to the DOM language by using HTML tags — that (and more) is what react-native-web does for us.React Native for WebRepository — https://github.com/necolas/react-native-webCompatibility: React Native >= 0.63.“React Native for Web” makes it possible to run React Native components and APIs on the web using React DOM.High-quality web interfaces: makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-quality interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.Write once, render anywhere: interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.Big Giants using React Native for Web in production?Twitter, Expo, Major League Soccer, Flipkart, Uber, The Times, DataCamp.Getting startedThis guide will help you render components and applications with React Native for Web.If you’re not familiar with setting up a new React web project, please refer to the React documentation. Installnpm install react react-dom react-native-webRecommended starter kitsThere are two ways to get started with a new React-native-web project. You can use either npm or yarn.ExpoExpo is a framework and a platform for universal React applications. Expo for Web uses React Native for Web and provides dozens of additional cross-platform APIs.npm install expo-cli –globalexpo init my-appcd my-appexpo startCreate React AppCreate React App is a basic way to setup a simple, web-only React app with built-in support for aliasing react-native-web to react-native. However, it’s generally recommended that you use Expo.npx create-react-app my-appcd my-appnpm install react-native-webnpm startStandalone configurationsConfiguring a module bundlerIf you have a custom setup, you may choose to configure your module bundler to alias the package to react-native.For example, modify your webpack configuration as follows:// webpack.config.jsmodule.exports = {  // …the rest of your config  resolve: {    alias: {      ‘react-native$’: ‘react-native-web’    }  }}Configuring BabelBabel supports module aliasing using babel-plugin-module-resolver{  “plugins”: [    [“module-resolver”, {      “alias”: {        “^react-native$”: “react-native-web”      }    }]  ]}Configuring JestJest can be configured using the provided preset. This will map react-native to react-native-web and provide appropriate mocks:{  “preset”: “react-native-web”}Please refer to the Jest documentation for more information.Configuring FlowFlow can be configured to understand the aliased module:[options]module.name_mapper=’^react-native$’ -> ‘react-native-web’You may also need to include a custom libdef (example) in your config.Configuring Node.jsNode.js can alias react-native to react-native-web using module-alias. This is useful if you want to pre-render the app (e.g., server-side rendering or build-time rendering).// Install the `module-alias` package as a dependency firstconst moduleAlias = require(“module-alias”);moduleAlias.addAliases({  “react-native”: require.resolve(“react-native-web”),});moduleAlias();Configure StorybooksWhy would I want a storybook with react-native-web?If you are using Storybook, having an explorer to see how to render your native mobile components matters to you. Why would it be different within the web?Start by adding storybook/react to your project:npm install @storybook/react –save-devNow create a folder storybook-web at the root of your project. This is where we are gonna put all our configuration for the storybook web.Create a file main.js in the folder storybook-web which contain the following code:module.exports = {  stories: [‘../src/components/**/*.stories.js’],  webpackFinal: (config) => {    config.resolve.alias = {      …(config.resolve.alias || {}),      // Transform all direct `react-native` imports to `react-native-web`      ‘react-native$’: ‘react-native-web’,      ‘@storybook/react-native’: ‘@storybook/react’,    };    config.resolve.extensions = [‘.web.js’, ‘.js’, ‘.json’];    // mutate babel-loader    config.module.rules[0].use[0].options.plugins.push([‘react-native-web’, { commonjs: true }]);    return config;  },};When building on the web, this will replace every react-native import into react-native-web import and doing the same with @storybook/react-native and @storybook/react.If you use some native libs which are not supported by react-native-web, you can easily create your own alias.Let’s now create the file addons.js which will add the addons you normally use on storybook mobile:import ‘@storybook/addon-actions/register’;import ‘@storybook/addon-knobs/register’;import ‘@storybook/addon-links/register’;The minimal configuration for our project is set! We just need to add a command in the package.json to launch a storybook on the web!In the scripts object, add the following command:“storybook:web”: “ln -s ../@storybook/react/bin/index.js storybookweb && mv storybookweb node_modules/.bin && storybookweb -p 6006 –config-dir storybook-web”A quick explanation: @storybook/react-native and @storybook/react to have the same link name to launch their binary: start-storybook.To be able to differentiate them, we have to create a new link for @storybook/react. This is what we do here:ln -s ../@storybook/react/bin/index.js storybookwebI named it storybook web but you can change it as you want.After created, we move it in node_modules/.bin and we use our new command to launch @storybook/react, specifying the configuration directory:mv storybookweb node_modules/.bin && storybookweb -p 6006 –config-dir storybook-web”Now you can launch yarn storybook: web and enjoy your components on the web!About the AuthorShikher Mishra, a brilliant software developer aims to bring technology a bit closer to non-tech savvy people by writing blogs that simplify and educate.

Learn More >

How Digital Transformation will Help Your Restaurant

Over the years, the restaurant industry has been slowly digitizing itself by the adoption of new-age technologies to find digital avenues to generate revenue and create brand awareness. The growth of online food delivery systems has slowly been revolutionizing the way consumers experience and interact with the restaurant industry. These platforms have enhanced restaurant services, created brand awareness as well as promotion, and introduced an easy and convenient way to access food.Though there was a change towards a more tech-oriented service, the change was slow, with conventional service being a more preferred option for both consumers as well as businesses. But the arrival of the Covid19 pandemic has forced restaurants out of their comfort zones and has drastically changed the dynamics of business-consumer interactions.The global lockdown in 2020 delivered a final ultimatum to restaurants across the globe to reconsider their existing strategies or go out of business. Consumers were now hesitant to visit restaurants and were finding safety and leisure through takeouts and home deliveries. Online food platforms began to prosper through a partial monopoly in the delivery business and in turn forced restaurants to offer ludicrous discounts that further scarred the businesses. Restaurants realized the value of building their own online presence and how it might help them in the days to come.Benefits of Building Applications for Your Food BusinessOne of the best assets that restaurants have considered building is food applications that generate revenue as well as establish multiple touchpoints towards consumer interactions thereby helping them introduce and reestablish their brand image in the mind of the consumers. The applications also enable a straightforward method of food ordering, right from selection to transaction. Businesses derive a number of benefits that are listed below.Grow Audience by Enhancing Online Consumer ExperienceFood Applications allow businesses to communicate directly with their consumers rather than through an intermediary food platform. Food applications also help the business gain autonomy over its prices and offer unhindered value to its consumers. It also helps to project the right brand values and to gain direct feedback from the consumers and improve their overall service. Businesses can also improve their customer experience by answering all consumer queries via chat services and bots. By offering a help section, businesses can portray genuineness and gather information about the likes and dislikes of their consumers. For example, Chipotle spotted the opportunity to attract new customers by means of a delivery service offered in its app. The company’s digital sales grew 65.6 percent compared to the previous year.Source of Data and InformationApplications help businesses gather relevant data about their consumers and their behaviors to build an extensive and powerful database that houses their preferences, behavioral traits, system information, popular orders, user flows, user types, feedback about both food orders as well as the application and many more such data points. Using advanced algorithms and by analyzing and recognizing recurring patterns, businesses can refine existing features, quality of food, quality of service and optimize them to increase marketing and sales efforts. For example, By collecting user data through their app, Starbucks has been able to try out new ideas, recipes and roll out targeted data-driven initiatives which thereby increased their loyalty program members to 16.8 million (as of April 2019).Better SalesApplications help capture the attention of a number of consumers by providing them both the leisure of browsing through various food options and the comfort of getting the food delivered without them moving a muscle. This is what makes food applications one of the leading online avenues to increase sales and make a profit. Businesses with their own applications gain autonomy over prices, promotions can push and offer deals like and app exclusives that intermediary platforms cannot. This helps in capturing and retaining a bigger share of the consumers. For example, UK’s Dominos increased its sales by 28% after the release of its mobile app.Consumer Experience through Loyalty ProgramsLoyalty programs help create a personalized experience for the consumers thereby improving loyalty and retention. It also plays its part in consumer acquisition by promoting word of mouth promotions from brand loyalists and existing customers. A point-based reward program that unlocks schemes, coupons, and discounts could help businesses grow and increase profit. Using loyalty programs to trigger email alerts, SMS’ and push notifications to help create engagement points with the consumers to keep the application in the limelight. For example, Dunkin’ Donuts launched its rewards program, called DD Perks, in 2014. Using the Dunkin’ app, customers can earn, monitor, and redeem points, order up to 24 hours in advance, customize their orders, pay, send gift cards, and save favorites.Social Media MarketingApplications create a tertiary want for consumers by allowing them to talk about their experience with the brand through their social media channels. By using the food applications to create engageable content that pushes consumers to share on their channels, businesses can gain awareness and grow their businesses. For Example, Mcdonald’s increased its Instagram presence by running a campaign that involved customers taking pictures of their favorite meals through their app and sharing it on Instagram.ConclusionTechnology is rapidly invading the food sector and is changing the way restaurants have operated. The quick-service restaurant sector is tackling digital business disruption head-on. Socioeconomic factors and consumer demand for convenience and flexible fulfillment are pushing customer experience boundaries. A study revealed that by 2025, online food orders will account for 40% of total restaurant sales with a forecasted growth rate of 15 to 20% for online food orders. It is high time that restaurants adopt a digital strategy to stay sustainable and relevant in their businesses. Nineleaps can partner with you on this transformation journey and use our expert experience in building the application that your business needs.

Learn More >

Mastering JavaScript Error Handling

Errors are bound to occur in any program/ software. Browsers, javascript do a pretty good job in handling errors. Javascript creates an object for any error. This object essentially has a name and a message. The name represents the type of error (Javascript has six types of errors). The object message provides useful information about the error. Javascript lets us do the error handling using try, catch and finally blocks.Lets see a code snippet without try, finally block://Code Snippet:counter = counter + 1;testFunction();function testFunction() {console.log(“Function is executed”);}In the above code snippet, counter is not defined. Hence the first line of code will throw a reference error. The function “testFunction” is never called.In a real time project, this could be fatal as a single reference error will stop the execution of code and application may stop responding.Introducing try, finally block://Code Snippet:try {counter = counter + 1;} finally {testFunction();}function testFunction() {console.log(“Function is executed”);}In the above code snippet, counter is not defined. Hence the try block will throw a reference error. Irrespective of the output in the try block, the finally block will be executed.//Code Snippet:var counter = 2;try {counter = counter + 1;} finally {testFunction();}function testFunction() {console.log(“Function is executed”);}In the above code snippet, try block will not throw any error. As expected, the finally block will execute the code.Introducing catch block://Code Snippet:try {counter = counter + 1;} catch (exception) {console.log(exception.message);} finally {testFunction();}function testFunction() {console.log(“Function is executed”);}As mentioned earlier, Javascript provides an error object with name and message. This object can be passed as a param to the catch block. You can catch the error message, error name(type) from the exception object.//Code snippet:var counter = 2;try {counter = counter + 1;} catch (exception) {console.log(exception.message);} finally {testFunction();}function testFunction() {console.log(“Function is executed”);}In the above code snippet, try block will not throw any error and catch block will not have exception to throw. As expected, the finally block will execute the code.

Learn More >

A Healthy Comparison between SwiftUI and Storyboard

StoryboardStoryboard is a part of an interface builder which has been the most common way to create UI for iOS applications after its initial release with iOS 5. Any new iOS project has a Main. storyboard file by default.“The Interface Builder editor within Xcode makes it simple to design a full user interface without writing any code. Simply drag and drop windows, buttons, text fields, and other objects onto the design canvas to create a functioning user interface.” - Apple documentation about interface builders.A Storyboard in Xcode is a file that contains an empty canvas type screen. On it, we can drag and drop all types of objects available in the object library of Xcode. We can create almost everything from controllers to text fields to images to table views to buttons, all this without writing even a single line of code. You can add controller screens like a table view controller, navigation controller, etc. through drag and dropping from the object library. You can add segues and move through different screens. Even the smallest components like labels, images, text fields can be dragged and dropped from the object library.Advantages of Storyboard:It is easy to learn for even a beginner.With Storyboard, you can create a prototype of an app barely in an hour or two, which makes it easy to visualize the app without writing hundreds and thousands of lines of code.The storyboard object library has a vast collection of objects.It also has a large community support network.Drawbacks of Storyboard:Source control is difficult, since the storyboard code is in an XML type format it is very difficult to resolve merge conflicts as you cannot completely understand the code.While creating the application UI you have to keep in mind the Autolayout issues that they should work with all the supporting device sizes, you need to separately check on all devices using the preview option or running the app on each device.As the number of screens keeps increasing the management of storyboards can become very chaotic and as it forms a complex web-like structure.Swift UISwift UI was released with the release of iOS 13.“SwiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and as little code as possible. With SwiftUI, you can bring even better experiences to all users, on any Apple device, using just one set of tools and APIs.”-Apple documentation about swift UI.Swift UI is basically a toolkit released by apple to create UI’s in a declarative way.AdvantagesA single code can be used for all apple platforms like macOS, watchOS, iOS, etc.It offers an automatic live preview option which is like a hot reload that shows the changes made in the code immediately on view.There are no Autolayout issues as in the storyboard.It offers both drag and drops through the object library as well as writing code in the file facility.The code is simple and clean.Swift UI view elements can be easily reused, by creating smaller module files.It gives way to reactive programming by providing bindable objects.You can also mix UIKit and SwiftUI by using UIHostingController.DisadvantagesIt supports only iOS 13+ and Xcode 11+, so you cannot build lower version apps using this.It is still very new, there are not as many component options in the swift UI as in the storyboard object library. So you have to create custom views to fulfill requirements, eg: The search bar.It could be difficult for someone to switch from storyboard to swift UI as it is difficult to visualize the view hierarchy in the form of code.There is no direct way of migrating from storyboard to swift UI. This compels a developer to continue the use of the storyboard for existing apps and in lower versions.Since it is very new so there is less community support which is not the case for Storyboard.After looking at the pros and cons of both Storyboard and SwiftUI, building an app UI using storyboard is comparatively easier for a beginner, and has been for a very long time. But there are some flaws with it and those flaws have been taken care of in Swift UI.Swift UI also has its own set of flaws, but it can be seen that those flaws can be overlooked in terms of the advantages that it gives. Swift UI has a lot of potential for the future. You can also take a look at this Single view iOS application using swift UI if you want a taste of a SwiftUI application: iOS application using SwiftUI GitHub link.

Learn More >

Basics of Reactive Programming In Swift (RxSwift)

Reactive programming basically means relying on entities emitting elements, subscribing to its changes and reacting to those changes. So, reactive programming saves you from having to re-check states and manually putting conditions in your code. It remarkably reduces the code lines and makes the code cleaner and easier to manage. Most importantly, it manages asynchronous code execution in a very elegant manner owing to its observable-subscriber method.This article will give you a quick skim of elements of Reactive programming in just 4 min reading time. These are some basic terminologies that are used while writing code using the Reactive Programming paradigm.Observable: it is an entity that can be of any data type and emits elements to its subscribers on happening of every different type of event. Example: it emits error on an error event, emits the received value on an onNext event, etc.Observer: This subscribes to observables and listens for changes in them and takes the programmed action on any change.Dispose Bag: A dispose bag holds disposables in it. So basically, it is used for garbage management in the files. When we create subscriptions, we keep adding them to a global dispose bag in a file. So whenever that particular files’ memory is deallocated the subscriptions are properly disposed off from the dispose bag, so this ensures there are no memory leaks in the project.Subjects: Subjects acts dual way, both as an observable as well as an observer. There are four types of subjects :Publish Subject: it starts empty and only emits new elements to its subscribers. On completion, it still emits completion to its new subscribers.Behavior Subject: Starts with an initial value and replays it or the latest element to new subscribers.Replay Subject: Initialized with buffer size and will maintain a buffer of elements up to that size and replay it to new subscribers.Async Subject: Emits only the last next event in the sequence, and only when the subject receives a completed event.5. Relays: These wrap their respective subjects, but only accept and relay the next events. You cannot add a completed or error event onto relays at all, so they’re great for non-terminating sequences. There are two types of relays: PublishRelay and BehaviorRelay.6. Operators: there are different types of operators such as filtering operators, transforming operators, time-based operators which can be chained on observables using the dot operator so that the input from the observable can be modified as per requirement.Filtering operators: these operators let you filter out the results received from the data source. There are different type of filtering you can do on data using different operators, for example, .elementAt(index): it gives the element at a particular index, .skip(n): it skips n elements emitted by data source etc.Transforming operators: these operators let you transform data received from the data source into a different type. Some examples of this are .toArray(): this operator is used to transform the received elements into an array, .map(): allows you to enter a data type and change it to another data type.Combining operators: these operators let you combine results from observables. Example: .concat(): it is a static function that combines two observable sequences, .zip: it is used to couple two operations/requests and aggregate a result once both are done.Time-based operators: these operators are used to do operations like buffering and replaying data. Example: replay(): This operator creates a new sequence which records the last ’n’ emitted by the source observable, interval(schedulers: ): it produces an infinite observable sequence of Int values (effectively a counter) sent at the selected interval on the specified scheduler.7. Schedulers: A scheduler is a context on which a process takes place. So schedulers here are used to shift subscription contexts. There are different types of schedulers like MainScheduler, Concurrent Schedulers etc. To Switch Schedulers, we use these two operators:subscribeOn(): we can switch threads by using this operator.observeOn(): this operator changes the scheduler where the observation happens.That’s all about the basics of Reactive Programming and a sneak peek into Rxswift.I hope it was helpful enough to give you a kick start on reactive programming and rxswift!Please share your valuable feedback in the comments section and also give the article a Clap if it’s worth it!

Learn More >

Scope Chain Performance Optimization Tips

Browsers have evolved a lot in the past few years and many of the below discussed points may or may not be valid for modern browsers.However, I am just catching up with few points regarding scope chain and performance that may (or may not in modern browsers) affect the performance of web apps.Lets start with an example:While testScopeChain function is invoked, execution context sets up a stack. The local variables will be accessed first. If a variable is not found, interpreter will go deeper in the stack and keep looking till it finds the object (it is somewhat related to prototypal inheritance).function testScopeChain() {var location = document.location.href;var protocol = document.location.protocol;return (‘Location is: ‘ + location + ‘ & Protocol is: ‘ + protocol);}In the above code snippet, document is a global object. So the interpreter will look for the object in the first row of the stack first and won’t find it. It will have to traverse further to look for the object in the next row of execution stack (global object). This further traversing will take longer and may cause performance issues.The code may be refactored as:function testScopeChain() {var doc = document;var location = doc.location.href;var protocol = doc.location.protocol;return (‘Location is: ‘ + location + ‘ & Protocol is: ‘ + protocol);}Once we have a local copy of document in doc, it can be accessed locally (in the first row of the stack).Coming to closures, an extra row is added to the execution context stack.function outerScope() {var outerScopeVal = ‘Outer Scope’;function innerScope() {var innerScopeVal = ‘Inner Scope’;console.log(outerScopeVal);console.log(innerScopeVal);}innerScope();}outerScope();In the above code snippet, innerScopeVal can be accessed locally (in the first row of the execution context stack). But when it comes to the outer scope, outerScopeVal can be accessed from the next row which again may take some time.Issue with ‘with’ and ‘catch’ statements: They will add a row to the execution stack. Essentially this row will be the first one. So even local variables will be placed in the second row.Recommendations:1> Use local variables as much as possible.2> Avoid with and catch statements3> Minimize use of closures4> Always use var to prevent accidental declaration of global variable

Learn More >

Elm Programming Overview

Elm programming language falls under the functional programming paradigm. It may be considered as an alternative to good old javascript for frontend web development.Salient Features:Statically typedImmutable dataNo runtime exceptionsThe Elm architectureInteroperability with JavascriptAll the elm code is compiled to Javascript. elm-html creates DOM nodes at runtime as required.Installation Set up://Install elm globally:sudo npm install -g elm//Set up package.json:elm package install//Install a specific package:elm package install package_name//Start server:elm reactorUsing elm-reactor (or elm-make without any options) generates a skeleton consisting of HTML and CSS, with a script tag containing the Elm code compiled to javascript. The Elm compiler provides two ways to compile the code:elm make Main.elm — output index.html — outputs to index.html, and contains HTML skeleton and the compiled elm code.elm make Main.elm — output elm.js — outputs to elm.js and only contains the compiled elm code.Note: Tabs are not allowed in elm.//Hello World Program:— Syntax for comments in elmmodule Main exposing (..)— Package is imported from elm-package.jsonimport Html— Html.text converts the string “Hello World” to html formatmain =Html.text “Hello World”Refresh the browser. The Hello World should reflect now

Learn More >