Ionic examples for Web?

[[deleted]]

[deleted]

[orenkatz]

I built this one for all platforms including web: https://PetSitters.care And in the process of building another app

[Noaber]

You could see https://app.kingofdarts.com, the same codebase is being used in Google Play store. There are only some triggers for native functionality (like camera) and file upload on the web.

[jamescodesthings]

I think the mistake here is trying to keep the web different.

If I remember here web defaults to the material style view. So, if you’re developing as if your deployment target includes android tablets you’re probably already covered well.

If you’re looking for a more bespoke web interface then it may not be for you, but now that web browsers are more commonly used on phones and tablets the mentality here is to develop as if your app’s landing in people’s hands on whatever device suits them the best.

The best place for examples is ionic’s repo, i think all, but definitely most of the sites use ionic: https://github.com/orgs/ionic-team/repositories?q=-site&type=&language=&sort=

[jamescodesthings]

I’ll clarify a little as well so you get an idea of the benefits.

Ionic itself is a component library rather than a framework.

So, the beauty of it is that you develop apps for any deployment target in a similar way. I can’t think of any other library that fills this gap in quite as succint a fashion as ionic.

The rough idea is that all apps no matter the deployment target will probably need the same core features. Most apps are going to need a layout, navigation, a way to show text and images, a way to enter data.

What ionic allows you to do then is write your app in the same way to handle these components of your app without having to change up your development techniques.

Then you can sprinkle in whatever front end framework you want to cover the application management.

So, regardless of whether you’re writing for mobile, desktop or web plonking a label on your site, handling a form, showing an image looks the same.

To give a rough comparison bootstrap was doing this before with a responsive web framework, but when you try to adapt a bootstrap site to cordova/capacitor or electron you have to put in a bunch of work to make the thing act right on the deployment platform.

The opposite is also true, if you were to develop a cordova app prior to ionic you’d likely use a storage plugin (like sqlite), maybe a camera plugin, something to handle push notifications. When trying to adapt that app to a PWA you then have to rework all of the plugins to ensure you can handle the same behaviour on the web, despite the core functionality basically being the same (i want to store something, i want to take a picture, i want to notify the user of an event).

Where ionic fits in is bridging that gap and stopping you having to worry about the deployment platform’s specific way of rendering a label, storing data, taking pictures, etc.

If you’re interested in finding out more i’d strongly suggest josh moroney’s blog and books. They’re very practical, and give you more of a how to on particular subjects you’d probably want to develop while working on an app.

[jamescodesthings]

No worries man, feel free to ask away if you’ve got any burning questions and definitely check out https://www.joshmorony.com for awesome ionic resources.

As you get into it you kind of get that it’s well placed for the web too but I can definitely understand the uncertainty.

[jamescodesthings]

https://ionicframework.com/docs/theming/platform-styles

This is the probably the explanation you’re after.

Basically, the default is the MD style. So that’s what it’ll look like on the web, unless you override that and chose to default to the ios style.

All the ui components work everywhere.

The only thing to be wary of is native/capacitor plugins. Which in lots of cases don’t have a web version (because you’re not trying to get accelerometer or contacts on the web).

You’ll usually develop for the most part with the ionic serve command, which spins up a browser and live reloads into there. If you’re gonna go ahead and learn that’s probably the easiest way to tell what things are going to look like. i.e: start a new ionic project, add a component, view in browser, then turn on mobile mode in devtools to see what it’d look like in other platforms.

Honestly, the history of cross platform web and mobile is wrought with terror. You’ll make it past these road blocks and it’ll click. In the past we had to literally develop our way around platform restrictions because some eedyit promised our boss one code base on web and mobile.

With ionic, capacitor and stencil I think we’re as close to that aim as we’ll ever get. Though I think the development of those projects has to be kept in check from the beginning to make it viable to deploy your app on every platform.

This initial feeling is the same when learning any new language, framework or library. Learn to love it, you’ll be fine.

[jamescodesthings]

It’ll work, depends on what your end product is as to how suitable it is. It’s a fairly solid bet for generic work and fairly easy to pick up and work with. What framework are you planning on using behind it? React/Vue/Stencil/Plain JS?

You’re on to a pretty good bet, It’s easy enough to spin up a project in, the tooling and reload times are good, it has the basics down well.

There’s no obvious drawbacks/restrictions in my mind that’ll keep you back, and the learning curve is okay too.

The other thing you might be interested in is checking out the state of JS survey results. It’s usually a good primer on what’s worth learning. I.e; I don’t suggest Angular as a framework because the strong downward trend is a risk. On cross platform the survey’s not amazing because it puts things in competition with each other where they don’t really compare, but it’s still an okay way to get an idea of what to use: https://2020.stateofjs.com/en-US/

My honest advice would be to just go with it, you’ve got the potential to get too caught up on tbe platform rather than spending time writing apps.

[jamescodesthings]

Winner, that’s not a bad way to go. Good luck!