blog
Vite and React: A Speedy Duo for Modern Web Development
Introduction: The Need for Speed in Web Development In the fast-paced world of web development, speed and efficiency are paramount. To meet these demands, we
Abhay Pareek
Ionic framework is an open-source framework that is available under the MIT License for the development of hybrid mobile and desktop applications. It uses web technologies like HTML, CSS, Javascript along with javascript frameworks that are Angular, React, and Vue. It is a single codebase running on all mobile and web platforms.
Ionic 4 was released in January 2019. Ionic 4 had a considerable change in the Syntax of the Ionic Angular codebase along with it also added official support for React, Vue, and web components.
Note: There is not much difference between Ionic 4 and Ionic 5 syntax. I will be referring to Ionic 4 in this article, but you can use the same article to move to Ionic 5.
To get started with Ionic 4 you can either install or update the Ionic CLI and then you can start the application.
Migrating from Ionic 3.0 to 4.0
The new Ionic change has significant advantages over Ionic 3. The Ionic framework has entirely revamped from scratch using standard web API’s and each component is packaged as a web component. It is always a good approach to initiate the migration process from scratch by creating a new project for your application, rather than trying to enhance the existing application.
- Firstly before migrating to any framework, we need to familiarize ourselves with the changes that happened so that are aware before hand of what changes has to be done in our application. You can always refer Ionic framework’s official page.
Now let’s get started with the migration. Make sure your Ionic CLI is updated. Let’s create a new Ionic4 application which is a blank starter and then copy all your code in the relevant folder one by one. Make sure you upgrade your Angular version too so that we get to experience new features of Angular and Ionic 4. - This approach is suitable when there is a notable change in the structure of the project, Ionic 4’s project structure is fully altered. Now your whole code will reside within the app folder of your project unlike Ionic 3 where all the code was in the src folder and not in the app folder.
Ionic 3 project folder structure:
Ionic 4 project folder structure:
You may get many syntax errors once you copy all your code and run the project this is because Ionic 4 uses an upgraded version of Angular wherein there are several changes. But we will explore further how to solve individually.
You need to copy files in their particular folder. This will help in categorizing the files and keeping the structure intact. For instance, service files should be saved under the service folder same as pipe files should be saved under the pipes folder, page files should be saved under the pages folder, components should be saved under components, and so on. You might also need to rename the files since the nomenclature has changed in Ionic 4.
Nomenclature in Ionic 3:
Naming practice in Ionic 4:
3. The 3rd step will be the important one and i.e. installing dependencies. You need to install all the dependencies which you have added to your Ionic 3 application. After you copy the files from the Ionic 3 project to Ionic 4 and you run the project by initiating an Ionic serve you’ll get a bunch of errors in which some of the errors will be related to the missing packages from your Ionic 4 project. You have to install all the missing dependencies by doing the following – either add the package in your package.json and run the following command:
or you can run the below command
Make sure you add the relevant packages since a few of the package names might have changed.
4. Next is to add your Angular routes because in Ionic 3 the routes were completely different. Here you will have to add all your routes in the app-routing.module.ts file in order to travel from one page to another. Your route navigation code in Ionic 4 will also be different from Ionic 3’s Push and Pop. This file will be imported into the app.module.ts file.
Your app-routing.module.ts file will look like this:
- At this point when you run your code, you might get many syntax errors. So what you have to do is read the errors carefully and go through each page, each service, each component and change the code/syntax accordingly and ensure the application up and running. You even have to change your ionic tags in an HTML file.
Here are few changes:
- At this point when you run your code, you might get many syntax errors. So what you have to do is read the errors carefully and go through each page, each service, each component and change the code/syntax accordingly and ensure the application up and running. You even have to change your ionic tags in an HTML file.
- In service file the injectable decorator has been changed from @Injectable() to @Injectable({provideIn:’root’})
- < button ion-button>Click Me < /button> Ionic 3 syntax < ion-button>Click Me< /ion-button> Ionic 4 syntax
- ion-navbar is changed to ion-toolbar
- ion-option is changed to ion-select-option
- Now all the inline styles need to be wrapped inside class attribute e.g. < ion-button class=”ion-padding”>Click Me< /ion-button
- @IonicPage decorator has been removed in Ionic 4
- The col size is now written like size=”1” and if you want to add a position to any element add it like position=”floating”.
- Angular lifecycle hooks like ngOnInit, ngOnDestroy has replaced Ionic lifecycles.
- In Ionic 4, the package name is @ionic/angular. While migrating an app, update the imports from ionic-angular to @ionic/angular.
6. Now will see changes related to CSS. In ionic 4 the main css file is changed from the app.scss to global.scss. Copy all the CSS from app.scss to global.scss. The custom CSS/theming works slightly differently in Ionic 4. Ionic 4 uses CSS4 variable instead of SASS variables. You need to change your variable.scss file to change the variable declaration to CSS4 variables.
Conclusion
If you follow the above steps then your fresh Ionic 4 application should be up and running. The quantum of changes required varies according to the app primarily. You might also need to update your Cordova plugins which you have used in your application. You can always refer to the Ionic 4 Official Page for syntax changes/plugin changes.
Contact us to find out how to implement Ionic 4 and 5 for your applications.
Read More Articles
blog
Developing Conversational AI applications by harnessing the power of LLMs
Introduction The power of conversational AI has become a transformational force in a world where technology continues to alter how people live, work, and communicate.
Sreekanth Reddy
blog
Building Reusable Web Components with ReactJS: A Step-by-Step Guide
Introduction In the ever-evolving landscape of web development, the concept of reusability has become a cornerstone for efficiency and productivity. Web components have emerged as
Abhay Pareek
