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
All other stuff is magically added through javascript (files) bundled together. This u do not want to separate through another paradigm which runs through modelling ui at the server level. U just serve the files generated by the bundler and treat it as a black box
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?
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
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?
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.
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.
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.
I looked at the Tour of Heroes, but it said I need working knowledge of HTML, JavaScript, and TypeScript. I got the first two covered, but not the last. So do I need to go learn TypeScript now?
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
Typescript adds a.o. Type safety to Javascript to avoid runtime errors. Maybe it is just fine reading a primer like on https://www.typescriptlang.org/docs/ ?
In the end u r mainly writing javascript and your own practice of typescript extras to apply rigor.
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?
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.
I always use Typescript. I consider it a language I use to tell my IDE to protect me from making stupid mistakes. I have background in strongly typed langauges like C. Plain javascript then initially is a runtime nightmare. Typescript helped me becoming happy with js again.
Next Typescript gives me autocompletion in the ide, so boosts productivity. No need to look up apis
Typescript transpiles into javascript which gets bundled into the www folder, which u publish in IIS.
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
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.
I appreciate your enthusiasm and optimism that I could do it “in a minute”; I really do. But I am having a really difficult time becoming a full stack web developer from having been a desktop developer since the early 2000’s. While I am familiar with OOP and design patterns, I am so used to having design-time form components where I merely set properties, and then writing code for functionality. Having to write a web UI with bracketed code tags and quoted attribute string values is a struggle for me. I know some HTML, some basic JavaScript, and some basic CSS, so having to become great at these tools, plus all the new back-end tools with Studio, .NET Core, MVC, etc. has been an uphill climb for me. Much of the time, I don’t even know what I’m reading about. The documentation assumes I know a lot, and I don’t.
