After 20 years as a desktop application developer, I have been tasked with learning a tall technology stack that includes Visual Studio, C#, .NET Core, Entity Framework, LINQ, MVC, Razor pages, responsive design, and Ionic. I have yet to figure out how all of the pieces fit together. How do I make Ionic pages become the results of Model-View-Controller requests in a .NET Core 3 application? We can start with generalities and sample code snippets, but my search results have been unfruitful.
P.S. Please note that I know nothing about Angular, Angular.js, Node.js, npm, Vue, React, TypeScript, Grunt, Gulp, or other related front-end frameworks for web design.
Angular,React and Vue apps are so called Single Page Application which means in the end there is only one html file needing to be served
SPA apps then communicate with the backend via HTTP or SDKs that hide that magic from the developer (e.g. Firebase SDK). Other technologies exists, like sockets, but maybe that is too distant from your use case
Ionic is a web franework agnostic UI library that helps u making web look and feel like native apps. Easy reliable and versatile. And free.
U still can use Ionic UI goodies in server focused app development by inserting for example through CDN in each page served by your backend. For example in php generated html stuff. So in theory u can even make an Ionic web app in Wordpress.
I have no experience in dotnet or so. Is this when u see .aspx in an url of a site?
Happy to learn that perspective
First, thank you for your reply. It took me a bit to realize SPA was single-page app, but I don’t know what a CDN is. I think I would be capable of making an API, though. I had started to, but was told to switch gears. Where do I go to learn how Ionic apps consume REST services, and use paradigms like JWT authentication? I don’t see that in the Ionic Framework (UI) pages. Is that why I have to learn Angular, React, or Vue, so I can consume REST and display it via Ionic?
Assuming you want a SPA and Ionic, the first choice and learning is about angular vue or react (to keep it simple).
I am biased and recommend angular because it is very opinionated about how you do things which is cool when u want to be guided. Angular guides are abundant. On JWT, REST, u name it. The command line is really helping a lot scaffolding stuff.
If you want to get a good taste of what it is go through the following tutorial: Angular
I guess Vue and React have a simple showcase and then u can choose.
Once you have your franework then google is your best friend: use the name of the framework and the technology plus example, and u will be guided to examples, blogs, stackoverflow etc.
The only thing u really need to keep in mind that frameworks develop rapidly, so examples older then 6 months may be obsolete
Looping in Ionic will then be just a simple learning of good UI setup and understanding the UI goodies. With the earlier mentioned frameworks u can forget about CDN
Here I shamelessly want to plug this webapp: https://ionicsvelte.firebaseapp.com/
All using the best of what Ionic has in its toolset and docs
Building your REST api is obviously a server thingie
I have heard about Firebase a lot because I’ve worked with Delphi for a long time. However, our back-end database is an IBM for i Series. I can successfully communicate with it using Entity Framework and LINQ in .NET Core 3.0 using a Nuget package.
What should I do first? Build my API or learn Angular?
That will be REST interface with the app?
I would think best is to wireframe/design the user flows which determines how the data is to be structured and which service calls to the backend u need
Then I am inclined to believe u start building your front first as a poc in angular and some initial interfaces. Gradually build together while testing some of your architectural assumption on performance, response time etc
Pending that and data availability at server u need to determine what to do in front end or backend
After all, response time is key anf pending device and bandwidth capabilities of your users devices u need to optimize
How r u deploying to users? Ios android, web app, pwa, desktop? Bandwidth availability?
Btw, if your use case is something common, u likely find some examples of parts of designs and api (like chat, social media, maps etc)
You ask a lot of good questions, and I don’t know how to respond. Essentially, I’ve got data on an IBM. Currently, users work with that data through a desktop app I built many years ago. Now, management wants things on-line and in apps. So, I figured the only way to do that was to build a web app in Visual Studio using C#, .NET Core, and Entity Framework. Then, I was told to make the app look like this other app that was built with Ionic. I’ve just had to try to piece together how to put these technologies together. The app will require authentication against Active Directory, authorization, and yet is mostly read-only. Being a first-time web developer, I didn’t know how to do it so I posted to this forum. That’s my story.
Not to worry… your users, what devices will they be using and how many? And what connectivity?
AD and Angular, quick search (untested on my end): Build Azure Active Directory (AD) Authentication in Angular application to Asp.Net Core Web API with MSAL | by Jayabalan | Medium
If you get this to work, then you are good to go. Combine with Tour of Heroes tutorial and some Ionic sauce, et voilá you have your read only web app, so you can ask a pay-raise.
Btw, before I forget to mention: you need to setup your dev environment (install Node.js, install angular cli)
As I understand it, this app needs to work from everywhere; on PCs and Macs via any kind of web browser, iOS, Android, and Google mobile devices (phones, tablets). Perhaps that’s why Ionic was picked for me. As for number of users, perhaps 100. Connectivity? The PCs would be on our intranet, but the app needs to work from home without VPN. Many will be on wifi, others on data.
For my part, I have created JWT tokens after Active Directory authentication. And I think I can continue creating the API because it would be useful in other in-house applications.
With these devices and stuff u r indeed in the right place using Ionic and web app
I dont know how u do your learning but I like to play around with code, like the Tour of Heroes
Generally good tutorials in angular use a proper amount of typescript so u will learn it that way. In the end u may even forget which is js and which is ts
Once you have the ToH mastered, you scaffold your first Ionic app using the docs. Add bits of code from the docs to make a nice ui, add ToH logic to it.
Alternatively, running ionic start, will give u a number of cool starter templates - probably the conference tenplate will scaffold many things u need in the end- login, menu, sidepane, routing etc
Will u be hosting the app on azure or somewhere else?
As far as hosting, I was thinking we’d host it on IIS in-house.
Allow me to rephrase - I am not a typescript guru, but I believe the main purpose is the type safety to help during dev time and avoid runtime issues early
From some readings and videos I believe u can really go crazy in making type definitions in typescript. There are even challenges to help you learn the depth of what typescript could do… but then typing becomes and end instead of means
So, if I understand correctly, you are an Ionic user and an Angular user but do not work with TypeScript. So you think I can skip learning TypeScript in depth, too? I’ve been reading the TypeScript Handbook for the last few hours.
Next Typescript gives me autocompletion in the ide, so boosts productivity. No need to look up apis
I like to think transpilation just removes TS concepts (like interface and typings like :number), and what is left is js the browser can process
If u like to have good reads on Ionic and Ionic Angular, go to Josh Morony’s site and read his blog, or buy his book. His style is really good and addresses all core concepts
Fireship has great short videos on everything
Ps. If u use angular, typescript is already integrated. So no need to be running separate commands to transpile and bundle. In ionic angular: just run ionic serve and it flies
In my only ionic app, I did it all at once. Learning by making!
You might want to have a look at ASPnet Boilerplate. If you are a .Net developer, it’s all there for you. DDD (Domain Driven Design), REST with JWT Auth, Controllers, DI, EF, Odata, AutoMapper, user-management, logging, multi-language, background processing, etc. etc.
You can generate a complete app with a frontend (Angular) and backend (NET 5.0) in a minute.
As a .Net/Ionic dev, this is absolutely the best I have ever found in terms of a complete, ready-to-use framework.
A commercial version with additional functionality is available, too.
Well, then u may want to go for low code solutions! Mendix and the others
Click and drop, with a bit of coding if really needed