DEV Community: DSachin

CodePush : Setup and benefits

DSachin — Fri, 30 Dec 2022 14:01:20 +0000

Once App is released to App Store or Google Play Store, fixing the bugs can be a hectic. While fixing one issue, whole app might get crashed. Any update that need to be made to Live app need proper testing and recompilation. In such case, we can use CodePush service.

CodePush is the cloud service provided by Microsoft which allows the app developer to deploy the new updates or changes directly to real app users. The CodePush automatically updated the JS code released to CodePush server so that app users do not have to update the app from app store. Like Git its act as an repository which is directly linked to Live app, any changes that needs to be made like image update, change in JS, CSS, HTML can be done. It creates a direct link with end users for solving bugs and issues without need to rebuild and distribute the app to stores.By default all React Native app created in App Center enables CodePush.

CodePush Setup

To enable CodePush to app, the app needs to be available to the App store or Google Play Store. We need the appstoreconnect or Google Console credential of apps already pushe to stores.

Lets setup the CodePush from creating AppCenter

Lets create new application and add new app.
For creating new app, screen will look like below:

Give a name to App
Select release type, OS and Platforms

Configuration

We can configure the CodePush on three different ways:

First : the build frequency allows us to run builds automatically when there is changes made for different platforms
Second : the distribute build allows us to distribute the app to different app stores.
Third : We can include the build script to package.json file which will run the post-clone, pre-build and post-build.

Distribution

For the distribution of the app to app stores,

Go to distribute section and under that select stores
To connect we need respective store credentials

Deployment

For the app deployment, go to CodePush option under distribute section. In there, select the enviroment.

Under Settings you will fine the key for different enviroments

The React Native CodePush use its own server to store every copy of the deployment it makes if it needed rollback action. The CodePush operation is done by wrapping the app in CodePush HOC (higher order component) which checks for updated in code then reload app with new updates. This whole process is maintained and managed from control panel provided by Microsoft ( the images above). It also provide user the testing features of new version of app in different version of devices and platforms before releasing to app stores.

Conclusion

With the use of CodePush, developer can easily deploy the new update to store without any rebuild and deploy to app store. It saves lots of time and effort of development teams while making new major updates to apps.

ESlint , Prettier and Husty : Setup for React Native App

DSachin — Fri, 30 Dec 2022 13:02:22 +0000

When developing any app, a development team is involved which develop the apps and maintain it. For small project, 5 to 6 team member is involved so it won’t be much difficult to manage and maintain. But for large project where more number of people are involved and are working on different app modules and features daily. In such scenario, to maintain the quality of code and managing it becomes quite a headache. If we are not maintaining the code then the code written by one team member cannot be understood by other working on same features, which will take more time to understand it and to work on it. This will affect the project delivery timeline.

If we are building app where other members are involved, maintaining the code quality, making it looks cleaner and standarized become our first priority. We need to make sure every team member follow one standard procedure while writing code. To maintain such standard we have different tools available. Today we will be discussing some of them and know how to setup them in our project. We will setup these tools in React Native project using VScode.

Prettier

Prettier is an code formatter which formats our codes automatically. Prettier covers the code format of Javascript, CSS, HTMl and GraphQL languages. It automatically formats the code on file save mode so it help us to write clean code faster.

Setup

To setup Prettier we can use npm or yarn.

// npm

npm i --save-dev prettier

// yarn

yarn install --dev prettier

Config

We can config it according to our needs by changing the .prettierrc.json file.

Eslint

Eslint is a tool that identifies adn reports the potter found in the JavaScript or ECMAScript code. It helps us to find bugs, errors while writing JavaScript and TypeScript code. It improves the code quality and find error, somtime it can auto fix the bugs also.

Setup

// npm

npm install eslint --save-dev

// yarn

yarn add eslint

Config

Like prettier we can also configure it. We are going to config it for TypeScript and use standard TypeScript styles. Whenever we write code in TypeScript the ESlint will verify the code according to the standard-with-typescript style.

A new file named eslintrc.json will be created in the project which contains the object of rules in JSON format. We can add own rule in this file but for now we will be using standard-with-typescript rules :

"extends": ["standard-with-typescript"],

We have installed ESlint tool as linter and Prettier for code formatting. The ESlint also includes some styling rules so it might arise conflict in styling the code. We need to config both using new dependency eslint-config-prettier

After install, config the eslint-config-prettier in eslintrc.json file as below:

Config the ESlint and prettier in package.json by adding followin code.

"scripts": {
"lint": "eslint . --fix --max-warnings=0"
"format": "prettier . --write"
},

Husky

Husky is a tool which helps us to work with GIt hooks. By using it we can setup script which will run at specific point of Git lifecycle. In our project, we will be using it to run ESlint and Prettier before committing to Git. In this case, every code style will be verified by Prettier before committing code to Git. If code does not follow the styling rules, it won’t get committed to Git. It will return errors during code commit. For pre-commit and Husky configuration we will be using lint-staged tool.

Setup

npx mrm@2 lint-staged

After running the command, a folder name Husky will be created in project directory and inside it contain pre-commit file.

We can also fine the changes in package.json file where lint-staged entry is added.

After the install of all three tools ESlint, Prettier and Husky, on every commit we will be running lint script to check error and bugs and format script for styling our code format. In case issue is found the commit process will be stopped with warnings.

Emulator or Simulator : Which one to Use ?

DSachin — Wed, 28 Dec 2022 11:25:24 +0000

When developer writes the code for any application, they need to verify the code logic and its UI implementation. In web app development, we setup an local server in our devices and then setup project and start the coding. Then all the codes and web pages, its design and checked in browser with local server address. All the debugging and testing is done in local server before pushing the whole project to Live servers. The same process is followed while developing mobile application. We setup our project in our computer and add packages through package manager. For the debugging and testing of the app we use a virtual devices mostly. We can use real device for testing by connecting it to computer through USB. Our mobile application is designed and developed targeting variety of devices version and different OS like windows, apple and android. Most of the developers cannot afford such variety of real devices just for testing one app. Using For solving this problem, virtual devices are used. Emulator and Simulators are the virtual devices we use for the testing app performance, user interfaces, designs and check if app is working as expected or not.

Emulator and Simulator are basically same if we see through its usage. Both are used to test the app and its behaviours on different user action in app. The simulator and emulator makes the testing the app fast and flexible during development process. But still these devices have differences on performance level, internal structure and debugging level.

Here are some of the major differences between emulators and simulators:

Build Language: The Emulator is written using manchine level assembly language and Simulators are written in high level languages.

Features: Simulator includes the configurations and software variable that real devices provides whereas Emulator completely mimic the real device due to which it includes hardware features and software features of real device.

Memory Usage: Since, Emulator tries to mimic real device hardware and software features it requires more memory space in hard drive and uses more RAM spaces. In comparison to Emulator, Simulator memory usage is less.

Performance: The performance of the emulator and simulator depends on memory and computer processing power. For high performance Emulator requires more memory and processing speed. Since simulator usage less memory, it can perform better than emulator with same hardware specification.

Debugging: While app development process, the emulator is more suitable than simulators for debugging purpose.

Which one is Better ?

While app development right choice of virtual device and its performance impact the project delivery time. Simulators is good choice for testing the application where testing of app is limited to software features rather than testing of hardware specific features. Like testing the data interaction between hardwares and UI display in different screens and resolutions.

Emulator is more suitable for the testing of the app features related to hardware behaviour. The emulators helps us to verify the app performance on different devices with different memory allocations.

Conclusion

The Simulator is fast and easy to setup for testing the software without any hardware mimicking Whereas the Emulator is better for testing app on hardware level and better testing results. Since, Emulator is more costly than simulator so to startup with low cost Simulator works. For the better debugging, the Emulator is the best option for actual app development.

Native App Development Vs Cross Platform App Development

DSachin — Fri, 23 Dec 2022 08:58:34 +0000

In mobile app is huge competition in market for mobile applications. We can find list of apps providing same kind of features. The end users have ton of options while installing apps. With the competition, there also exist high demand due to increasing number of users and high potential from business perspective. All the business providing there services through web are changing to mobile apps. As a developer if we do not want to run out of the jobs we need to know about rising development platforms for mobile applications development.

Mobile apps can be designed and developed using native platform and cross-platform. Since we can build apps using both it become a challenge on choosing the platform while developing the application. We need to analyze both platform and choose on the basis of project requirements.

Native App Development

Native App Development platform is platform used to develop either Android or IOS device apps. The development of apps depends on the OS of devices and OS based programming languages. For the IOS platform we use SWIFT or Objective C programming language with applications like XCode, AppCode. For Android platform, JAVA or Kotlin language can be used with android studio application.

Native apps provides the list of benefits to users and companies.

Better User Experience: Since, native app development use device specific language it uses system’s based components and explore its capabilities. It makes the app much faster than cross-platform. More user friendly and appealing design can be achieved.

Security: With the use of system built in security features, we can provide high security to the apps and its data.

Offline Access: user can access most of the app features without any stable internet connections.

Easy update: If there is any updates in system, Google and Apple also updates the languages for easy addition of new features to app.

Less Bugs: New system updates make new SDKs easily available to developers so it helps in quick improvement in apps and easy fix of bugs.

With the benefits its also bring some drawbacks. Some are listed below :

Code Reusability: the code used to develop IOS app cannot be used for Android app.

Cost: We need different teams for developing app for IOS and Android which makes the cost higher.

Development Time: Developing app for two separate platform by separate team require more time and efforts.

Cross-Platform App Development

Unlike Native App Development, we can create different platform based app from same set of codes. Creation of single project can fulfill demand of multiple platforms. We have React Native, Flutter and Xamarin as the Framework for the cross platform apps. JavaScript, Dart and C# are the programming language used in these frameworks. For the app deployment we need Android SDK in windows, Mac or Linux OS. For IOS, we must have IOS SDK, XCode and Mac device.

Most of the drawbacks of the native apps are fixed in cross platforms. Some of them are :

Low Cost: With one team, we can easily develop apps for IOS and Android. Developer only require knowledge of specific framework.

Code Reusability: Single code are used for both IOS and Android platforms.

Fast Development: With reuse of code, the app can be released to stores much earlier than native apps.

With the benefits its also bring some drawbacks. Some are listed below :

Performance: The use of apps in different platforms and device versions, it might bring compatibility issue and bugs. During development process more testing of app is required.

App Features: Since app runs on both platforms the features we can provide to users might be lesser than native apps. Platform specific feature may be unavailable.

Hardware Specific Integration: Integration of the platform specific features like GPU need native app development skills and knowledge.

Conclusion

To choose between native and cross platform for app development is harder if we do not have proper understanding on these platform. The determination of platform for app development depends on the project size, main targeted audiences ,performance, time bound, project budget and app security. If we are to build app for IOS or Android only, the native app will be the right choice. Similarly, if we are targeting every devices or larger market than cross platform is suitable. We need to consider its pros and cons while choosing the platforms.

JavaScript VS TypeScript : which one better.

DSachin — Thu, 22 Dec 2022 18:00:52 +0000

JavaScript

JavaScript is the Scripting Language which plays crucial part for creation of interactive applications. JavaScript follows the client side programming rules and get executed in browsers. Due the features like flexibility, dynamic , cross-platform, all browser supporting, its widely used in app developments. Due to the following features JavaScript is in demand for development of applications :

Interactive Language : can develop interactive projects during learning phase.

Low requirements : its simple to use so for starter it become easy to adapt and implement in applications.

Small Projects : Suitable for small Scale application

For the faster and better application development new programming languages are being introduced to market and are replacing other programming languages. TypeScript is one such new programming language which is taking the market of JavaScript and replacing in different fields. The main reason for more use of TypeScript over JavaScript are:

It contain all the features of JavaScript with extra features.
Every JavaScript can be saved and run using TypeScript extension.
The complexity that bring JavaScript while using in server side.
JavaScript Compatible with TypeScript

TypeScript

TypeScript is the Object Oriented Programming language introduced by Microsoft. TypeScript sits at the top of JavaScript and can be used for client as well as server side apps. Since, TypeScript is OOP language it includes features like static typing, inheritance, classes, scopes visibility, namespace, interfaces and so on. TypeScript can be used for building large scale and complex applications. Due to static typing, there is less chance of occurrence of error than dynamic typing. Practice of static typing leads to more code efficiency and less compile time errors.

TypeScript can be executed directly on browser like JavaScript so code get compiled to JavaScript which makes it compatible for both front and backend side app development for any scale projects. All the JavaScript codes can be executed by TypeScript compiler with some exceptions.

TypeScript Types

Any & Unknown : Allows developers to define variable without any types. Mostly used to declare incoming data whose type will be unknown.

Void : Used to set function return type which returns nothing

Intersection and Union Types : Intersection type allows us to combine different basic types to one type whereas Union Type allows us to choose one from multiple basic types.

Type Script support explicit as well as implicit types. During compile time, if we miss out to define type then compiler auto enable type inference to identify the type of data.
If we are to compare these two languages, we can compare on different terms :

Typing : JavaScript is loosely typed whereas TypeScript is Strongly typed.

Ecosystem: TypeScript is powerful and uses static typing so its more suitable for large scale and complex projects whereas JavaScript is simple to use and learn it is suitable for small scale projects.

Compiler: TypeScript need compiler to run whereas JavaScript does not.

Data Binding : TypeScript uses interfaces and types for data binding whereas for JavaScript no such feature is present.

Learning time: TypeScript requires OOP concepts and scripting Knowledge so requite more time to learn. JavaScript is simple and easy to learn so might requires lesser time than TypeScript to learn.

Client / Server Side : TypeScript used for Client side and JavaScript for both client and server side.

Conclusion

At last we can say that both language carries its own props and cons. It’s up to us to decide when to use which one on the basis of project size, complexity, time bounds. JavaScript could not be written in more cleaner and neat way than TypeScript but it still can be used to enhance web site performances. Due to need of compiler for TypeScript some browser does not support it, in such scenario we might need to use JavaScript.

React VS React Native : Basic Understanding

DSachin — Thu, 22 Dec 2022 15:15:27 +0000

React Vs React Native

If you are working in the field of software development field, you must have heard the terms React and React Native. Most of the developer get confused at startup between them due to similar names. Some might even think React Native as new version of React with some new additional features. Lets get a clear on these two terms and their actual features and where it is used in the field of software development.

Everybody must have heard or know about Facebook. Facebook is the one who developed React and React Native. React and React Native have the relation like parent and child. React JS is a JavaScript library which is used for mostly on the single page website. Single Page web application contain only one single page and all the contents needed are included there. Whereas, the React Native is like a child of React JS means its an React JS based Framework. React Native is developed to design and develop native mobile apps. Both are being used widely in software development.

React

React JS is an open source JavaScript library used for the UI/UX design for the websites and made publicly available in 2013. WhatsApp, Facebook, Netflix are some of the popular sites which are build in React JS. React is popular in creation of dynamic UI.

React JS use virtual DOM ( Document Object Model ) features which makes sites performance faster. Virtual DOM is actual copy of our web site DOM. Whenever there is changes to implement, react does not re render all the codes, it simply render the DOM that has been changed. It just re use components and styles for faster performances. Unlike other web application development platform, React JS can design and develop the application with minimal use of code. Due to its one way binding features for data functionality, it creates minimal chances of errors. It support real time change while developing the app means we can view the changes in apps instant after the code change. We do not need to refresh the browser. React app consist of list of components. These components are reusable in other projects which saves development time.

React use JSX to built UI components. The browser cannot read the JSX codes directly. It requires the transpiller to convert the JSX code to JavaScript code. We use Babel compiler to transform the JSX to browser readable JavaScript tags.

React Native

React Native is open source React JS framework. It simply inherit the features of React JS. Like React, React Native is preferred to make UI component for mobile apps. It is used to design and develop native mobile applications for IOS, windows and Android devices. Before React native, developers needs to code separately for different device in their native language like Swift for IOS, Kotlin and JAVA for android. For different platforms, separate apps are developed in their native programming language. Now due the cross platform functionality of React Native, the app works on both IOS and android with same code. If there are some features that are platform specific then we can also do that which won’t affect on app performance. React Native have libraries and reusable component which reduce development time.

Without any knowledge of native languages like JAVA an Swift, we can easily build the app. But there are some features that require native code involvement in app for which library could not be found like integration of payment provider. For such condition we use the layer called bridge. This layer allows the interaction between the Native codes and JavaScript. In the React Native app we can find the platform specific directory. Through these directory we add platform specific native codes and the actual bridge process takes place.

Conclusion

Both React and React Native gives us robust, faster and dynamic UIs. Learning React JS library and its working mechanism will automatically helps in understanding React Native framework. Developers can easily shift from web to mobile app development and vice versa.