Ionic 4: Should you Build a Hybrid App?

[@Fireship]

Ionic v4 looks amazing and is unmatched in the hybrid app space. I also figured this would be a good opportunity to make some comparisons to Native SDKs, React Native and Flutter while we're at it. Have you used Ionic? Would love to hear your experience in the comments

[@alidhuniya7733]

but app store will not accept hybrid app

[@danieljimenezG]

It is accepted, I have a hybrid app in app store. I do not use ionic though, I use framework7 with Cordova.

[@rukhairy]

Ali Dhuniy mine got published few weeks ago, no problem with it

[@gianpaj]

React Native is better in every possible way. From the developer experience, community and end product performance. I've published an ionic 4 app before, RN it's years ahead. The webview model is non-sense

[@memeguyTM]

Ali Dhuniya what are you serious? I just deployed one to 3 app stores seamlessly

[@sveinsoermo9883]

Clear and crisp as always, VERY good video. Very HIGH quality.

[@Fireship]

Thank you, appreciate the feedback :)

[@gustavvingtoft2362]

You just got yourself a new subscriber. Awesome video, clear voice and straight to the point. Thank you!

[@ZaheeruddinBabar_1]

Great stuff as always. Love your work! Keep them coming ❤️

[@Fireship]

Will do! Thank you Zaheer

[@jorgevasquezang]

Wow, great video!, I love the descriptive and clarity of your talk

[@AhmedHassan-wt7ss]

your video content and flow of exploring the topic is awesome .

[@rosszhu1660]

Awesome video! I've been using ionic 3 for years but haven't tried ionic 4 yet. It's a shame that we have so many languages and libraries basically doing the same thing. People always prefer to choose the technology they are most familiar with, instead of something "better". I spent most of my time on Angular so the choice is obvious.

[@zahirbyron1195]

You prolly dont give a shit but does anybody know a method to get back into an instagram account? I stupidly lost the password. I appreciate any tips you can offer me!

[@madduxclayton9047]

@Zahir Byron instablaster =)

[@zahirbyron1195]

@Maddux Clayton thanks so much for your reply. I got to the site through google and I'm waiting for the hacking stuff now. I see it takes quite some time so I will get back to you later with my results.

[@zahirbyron1195]

@Maddux Clayton It worked and I actually got access to my account again. Im so happy:D Thanks so much, you really help me out!

[@madduxclayton9047]

@Zahir Byron Happy to help :D

[@arnoldforova9317]

Watching all the way from Papua New Guinea. Jeff, you are the KING!

[@carrillocarlosce]

I was waiting for Ionic 4, i think it'll bring us a lot of new resourses for building all kind of things like for pwa it'll be awesome, thanks for sharing you're opinion and research about it with us.

[@Fireship]

If building a PWA, Ionic is really great as a component library. They are doing a great job in this space.

[@kwhandy]

jeff then: angular for everything advocate jeff now: new js framework brags advocate for everyone

[@narendrasinghrathore1012]

If you are an angular guy and want to build a mobile app in less time, that has to perform daily task then go for ionic. Or if you have more time to invest to learn and performance concerned go for flutter. Great explained, Regards.

[@romualdomariano1457]

How much time for flutter? I am considering my framework of choice because I want to be efficient at creating native-like application.

[@narendrasinghrathore1012]

@@romualdomariano1457 Depends on your experience in Dart language. But still you can get reference of plenty of sample codes on flutter doc website to start with and its upto individual 😀. 1-2 months of developing sample projects and you can be intermediate level.

[@romualdomariano1457]

@@narendrasinghrathore1012 can i make it offline though? I am curious on creating one having offline features because I used ionic and it seems that I need internet connection for the resources to load up building the "webview" (idk what is the term for it) basically the components of the application. I just think of an application that doesn't need internet to work with.

[@narendrasinghrathore1012]

@@romualdomariano1457 Yes you can.

[@romualdomariano1457]

@@narendrasinghrathore1012 thank you for the feedback. Maybe I try for flutter :)

[@mhassanist]

That 's a nice one. Thanks for sharing that!

[@augmentos]

You should do an updated Capacitor video now that its been out a while

[@nothingtoseehere5760]

How about now?

Spectacularly concise. Very very good work. Just run into your channel. I'm not big on youtube for software related content but this is awesome.

[@becayebalde3820]

I liked Ionic but had too many issues I can’t seem to understand. So I’m planning to transfer to react Native

[@RageBasterd]

awsome video. been migration one of my ionic 3 apps to 4 all day, not the most easy thing to do, but the ionic docs are very helpful. also been building some apps with flutter and loving it, althought saying flutter has no bridge is not entirely true. if you want to use device features like Geo Location or camera you still need to use a bridge( they call it a channel), its alot more similar to Cordova then to React native bridges. the benefits are that you can write very performant code with dart that gets converted to byte code, that unlike webview apps where their might be diffrences with between the javascript engines or the css interpreter. flutter apps will render the same on all devices.

[@Fireship]

RageBasterd you're totally right. Thanks for posting this extra detail. I should have said "JavaScript" bridge. I've also been using flutter for a while now and love it.

[@aavlasti]

Very good quality of the whole video. And the sound quality is great. The way You explain is awesome. HIGH-QUALITY product(video the whole thing) delivered. Thank you very much. more youtube channels like this. you can be a great teacher!

[@GabrielRodriquesGonzaga]

Simple, right to the point, great video thanks

[@DanielRLuke]

The 'Galloping Gerdie" footage was kind of funny...and creative.

[@Fireship]

Classic footage :)

[@nguyenduc6288]

Can we turn a pre-built project into an ionic project? Or should we create a new one and then migrate the project to it?

[@Joshfw27492]

Finally got rid of the nav controller, never saw the point of ditching the angular router in the first place. Great vid, should I use lazy loading in all my modules? It does seem better than traditional eager routing patterns.

[@Fireship]

Thanks! Yes, I would use lazy loading for every page since there's no major drawback AFAIK. Angular uses webpack code splitting to keep the critical path as lean as possible.

[@Joshfw27492]

Angular Firebase I guess I'll follow your advice on that, should I also do it with an angular based web application?

[@ihasmax]

We didn't ditch the Angular router! It didn't even exist when we started building Ionic 2 on top of Angular 2 😅And after that, it didn't exist for at least a year after we released 2.

[@ttma1046]

Could you let me know what do you think about NativeScript?

[@vahidnajafi756]

NativeScript is really awesome. It has lots of benefits over react native. See here for comparison: www.nativescript.org/blog/would-airbnb-have-fared-better-with-nativescript-instead-of-react-native

[@ProtectedClassTest]

More importantly it has hmr, which means the code changes are reflected real time

[@pabloweinxakapaulsynth966]

Thanks so much!!!! This tutorial is GOLD.

[@romelbabasa8930]

Let say I have a webpage and I want some of the features on my website in my app using ionic but I want to customize add features in the app like buttons, location tracker, push notification does Ionic 4 can manage that stuff?

[@Omniwoof]

I was using Ionic (v2-v3) to build our polling app but we could never get the app load times down to where we needed them. This isn't me saying that Ionic will be slow for you, but that 'black box' problem is a real issue. At the time I went hunting for performance improvements and mostly found forum posts telling people that 'native is slow too' and the devs promising more updates in the future. Being 100% fair I'm guessing they delivered on those improvements but what I really needed was to see inside the black box so I could work out what packages I could ditch to improve load times. So I moved over to Flutter (tree shaking built in), which has been a massive improvement. Thinking about doing some Flutter/Firebase content Jeff? ;)

[@Fireship]

Totally, there will be tradeoffs in exchange for faster dev times - that's why the "right use case" is so important. I have been thinking about Flutter content for a long time. I'm working on a Flutter project currently, so you'll probably some in the near future - I just need to change the name of channel first :)

[@vinceramces]

Angular Firebase im very excited... because apple wont accept hybrid apps(web view disguised as app).

[@Fireship]

Vince, that's not exactly true. Apple will only reject an app if it appears as a 1-to-1 clone of a website. Using a webview is not the root of the problem per se.

[@vinceramces]

so that means when the application is launched, the website(html,js,css) will only load. not the native components. I would like to retract my statement.

[@GalTadmor]

Great video, as always :) Regarding 3:30 (PWAs) - does that mean you can write an Angular 6 PWA, and with some additional Ionic tweaks, deploy it to the app stores? Without having a separate codebase for the mobile app? If so, that would make a great tutorial. It's also interesting to hear, how does that relate to Capacitor. When I first heard of it, I thought that the plan was to replace Ionic with Capacitor (same team, IINM).

[@Fireship]

Gal Tadmor yes, that is what it tries to accomplish. Checkout my 5 apps in 5 minutes video

[@skrrprrrh1611]

Apple can reject you if it's to similar to your website.

[@durgaprasadsetti8271]

Hope initial loading of the app time is reduced which will show 5sec white screen in v3.....

[@jesselima_dev]

Hi Jeff! Great video as usual. If you have to start an app in Ionic right now, which version would take the shot? Would you start in 3 then migrate to 4, or would you start in 4?

[@jesselima_dev]

I am worried about to get into troubles when the app is finished and Ionic 4 still in beta.

[@Fireship]

The Ionic 4 beta is pretty solid, so I would feel confident starting there. Migrating from 3 to 4 is quite painful, so you should try to avoid that.

[@jesselima_dev]

@@Fireship Nice! Thanks for the reply. I've reading Ionic 4 docs. The framework took a great step. I rather have problems in 4 beta than start a new project with 3 and very soon get into such painful migration process. If you say this migration is painful I believe you. I am gonna take that Ionic 4 in the Pro area. Thanks!

[@MrFikret90]

Had a chance to work with all these 3 framewors. Must to say, Flutter the most lovely for me. But, in next project we planned to share codebase for Web as well and Ionic is winner in this. Flutter for Web still under development and think Flutter will be absolute champion in near future. ReacNative also cool, but development process really horrible for me.

[@joopie46614]

flutter sucks

[@camstuart]

Excellent video once again! Here's a thought, if I'm looking to improve performance in a hybrid app like ionic, can I use web assembly? Does that work inside a web view? If a UI does some data processing, I would have thought wasm is the fastest option

[@Fireship]

Thanks Cameron! Hypothetically, that could lead to improvements, but if you have an app that needs WASM performance on the web, you'll probably want your mobile app to be native to maximize the device's capabilities.

[@clashclan4739]

more latest ionic videos pls and full tutorial for beginners

[@jhandgreat7079]

crisp! thanks!

[@nageshvecha7965]

May i know the prerequisites to learn ionic frame work mobile apps

[@Todiros]

So with Ionic, I could build a website with React and convert that for Android and iOS without extra code? Flutter in comparison can only build mobile apps so I will still have to build a website separately?

[@Fireship]

Maybe... If you need access to native device (camera, geolocation, etc), you need to patch in Cordova/Capacitor plugins. The bigger question is "Does your website work just as well as a native app". If yes, Ionic is great, but its tough to make a quality native app with 1-to-1 code sharing with a web app.

[@DavidSmith-ef4eh]

How would one use Ionic components in web apps? Is it possible to restyle them in a way that they don't look like mobile app elements when they are used in browsers?

[@vikramramekar8080]

Please tell which should be used react native, reactJs, ionic

[@eduarlalo]

your videos are so cool! Thx

[@benoitlaforet9887]

Hi, great video. is there a way to migrate an existing Angular 5 project to Ionic 4? Or i'll need to start a new project.

[@Fireship]

Benoit Laforet yes, but not sure if it's officially supported yet. Basically, the final version will support all js frameworks because it is built with web components

[@benoitlaforet9887]

I guess we will have to wait and see. If it ever become supported maybe you should do a video on this. Thank you

[@ismailamraoui]

Please Can you do Channel or tutorial about Flutter Firebase like Angular Firebase

[@Fireship]

Yes, I'm pretty confident you'll see some flutter content here soon :)

[@347harsha]

Bro But you didn't mention any advantage or disadvantage of using NativeScript framework

[@abhishektailor8401]

Please can you explain that how to show an app chooser in ionic 4?

[@kidando]

Awesome explanation. Great vid

[@FrederikoCMR]

I'm starting with Ionic 4 now, so my app is still in beta (with v3). I dunno if is it better to rewrite all the logic with Ionic 4 or migrate the existing one.

[@fernandosalazar866]

Hey! Great info as always. When are you gonna make some video to show usHey! Great info as always. When are you gonna make some video to show us how to scaffold ionic (make a boilerplate) with react or vuejs? how to scaffold ionic with react or vuejs?

[@chadlau3106]

how can we incorporate push notification with ionic 4 - android, ionic ios ?

[@businessinsane2408]

Use Google firebase

[@PriyankaGupta-pn6lq]

can we use angular 6 with ionic 3?

[@trinitynightclub1]

Yes you can

[@pramodbhoite8925]

Hiii.... i build an app in ionic 3 .. it was run on my android device but not connect with my AWS database server... what can i do ?? Please help me

[@jonathandsouza7592]

Why chose Ionic when Native Script allows you to write almost native apps?

[@vikramramekar8080]

Which programming languages should I know to use ionic? Currently I know Java, html, css, javascript, php.

[@maninderjeetbook]

All you need to know is - copy-paste 😉

[@zoecarlibur]

I have a dream, Where one day, Code written in TS / Angular would compile to Wasm on Build. Bridging native web performance.

[@Fireship]

I have similar dreams my friend :)

[@lemonphi]

TS->WASM should already work with Assemblyscript; you'd only have to configure Webpack to provide an automatic wrapper for UI communication. Now that I say it, I guess I'll look into it ;)

[@unityme8898]

but in my view to learn ionic, we must know javascript and angular but in flutter only one i.e. Dart :) !!!

[@MrKaremnour]

ionic is built for who already know web developing if u dont know web tech so dont use ionic

[@seanknowles4557]

Hi mate, just a quick question is your ionic course updated for ionic 4 and firestore?

[@Fireship]

Firestore yes, Ionic 4 no. I am actually considering a new course specifically for Ionic 4 over updating the old one.

[@seanknowles4557]

ooosh exciting news, fingers crossed, thanks for the awesome content :)

[@tanmohanshirsat8542]

Can I have single code base for PWA, Android, IOS app?

[@shawkisukkar7922]

Thanks

[@noufabdullah5676]

I’m developing my senior project which is a mobile application. Problem is i have never developed for an app but I’ve took a web development course and I only have 4 months to develop the application. Do you think hybrid is the best choice in my case?

[@Fireship]

Do you know web development? If so, hybrid will be the fastest way to get something built. If not, I would look into flutter or just native iOS/Android.

[@SolomonKahsai]

love love love man!!!!!!!!!!!!!!!

[@Fireship]

Great to hear, thank you!

[@Jimboo025]

Can I used ionic 2 with angular 4?

[@AGUNGKAYA]

I will be extremely happy if you make udemy course on ionic angular.

[@hemaya2003]

should i build angular web app and ionic app both for my project or i can convert from angular?

[@Fireship]

A big selling point for Ionic is that you can share the same codebase. But nothing stopping you from managing separate projects.

[@hashibyp961]

Thank you ,its very good video

[@RogerBurke]

very good...what a ride !!

[@jackvial5591]

Looks great!

[@Aman-uo5xb]

Still waiting for official admob plugin

[@morfeo7750]

In this video i can see that this is not easier nor accesible language than java or kotlin, it has same complexity for learning and keep the code running once app is finished, why should i expent months for learning it?

[@moseskarunia]

If you have progressive web app as your main app, why don't u ask your customer to "add to home screen" instead? Building / rebuilding it with ionic seems an extra overhead which can be cut down. See twitter web app, it really as smooth as butter and delightful to use on mobile devices. I never miss the actuall app so far. But yes, it also depends on your use case. But nevertheless, i don't see why making an app with ionic is a viable option you should consider.

[@Fireship]

Well Ionic is advertised as a cross-platform solution, so its needs to be compared to other native tools. I think PWAs are great, but true native is still superior in many ways. Twitter is a perfect use case, but apps that have heavy graphics/animation or require frequent native API access make the decision more interesting.

[@thinhtat]

No. Plugins were not stable for android and ios. It will make you guys crazy with third party integration. Even, inappbrowser is not working on ios, push plugin with picture is not working on ios,...and they are not fix by author. I swear i will use native

[@sepehrpakbaz652]

how could you not mention xamarin at all? thats a perfect blend of cross platform plus native performance specially xamarin native.

[@Fireship]

I considered mentioning Xamarin, but Flutter just has way more hype right now in that niche. There were other frameworks that got left out as well.

[@juanjolopez1546]

Great video! And what about Xamarin?

[@mel-182]

who else is a fan of silicon valley???

[@HowDoWeWhatNow]

No

[@somcho]

I'm a little confused ... Is there special template syntax (in the html) you use to invoke the async showAlert() method (like using the async pipe or something)??

[@Fireship]

Yes, with angular event binding on a button like: (click)="showAlert()" - My bad for not including that part.

[@aboriad15]

The video and article are both great. Choosing between them is very hard, there is no perfect solution, even flutter and react native apps have their quirks. and I can easily distinguish the performance and UI of an ionic app, even the popular ones like Untapped. Ionic is still the most tempting option for me because of all the handholding, angular and typescript, but shooting myself in the foot in the long run is the last thing I want. Choosing a framework has got to be one of the hardest decisions xD

[@Fireship]

Yes, very hard choice. Especially in 2018 when there are more choices than ever.

[@daksmemes7428]

is it true the only native to react native is there ui not there logic

[@carpfishprodcuts]

music ????

[@AkiZukiLenn]

Thanks ionic , you forced me to turn from bootstrap into your broken framework because my boss want to lazy compile a mobile app , I have to re write the whole app again !!! I can't re-call how many time i have to re adjust my custom component because everything you use override my component CSS!!!!!!!!!!!!!!!!!!!

[@KingstonFortune]

Really cool stuff

[@akinpinkman]

Is this still valid?

[@roozbehfarhadi9993]

Ionic is not the only hybrid app platform out there... You know?

[@Fireship]

I know. I thought about mentioning other hybrid frameworks in the vid, but ran out of time ;)

[@saidazim]

Are you using Manjaro?

[@Fireship]

No, ubuntu

[@aomo5293]

HI, Thank you for tutorial. Please, I would like to know if there is a way to protect / encrypt an ionic code app; Thank you

[@shubhamsingh-xk4nf]

super easy 😊

[@pdachannel8367]

This is framework perfect ^^!

[@jehanmuse330]

hi, can i suggest you to make tutorial on flutter? and add also for angulardart..that would be great.. angulardart flutter(also use dart) integrate with firebase for serverless deployment

[@tngjason1204]

Jason tng

[@malikjannadaf4558]

great

[@Fireship]

Thank you :)

[@SWAMY2217]

(Object c/Swift, java/kotlin)> 【React native, Native script ] > Ionic,cordova > PWA

[@kingdeath889]

flutter and dart too !!

[@utkarshin]

your voice is like JPerm KZbinr

[@rockyaurobido]

which server service is good for react native app?

[@elise6509]

So many terms I have never heard of before :|

[@marioleon86]

Is heart breaking to know that I will need to change a lot of stuff to migrate my app to IONIC 4

[@Fireship]

Yes, there are a lot of changes, but it's mostly just renaming as opposed to rewriting the logic.

[@SLKSGV2]

marioleon86 check it out the josh morony's guide to migrate the app

[@marioleon86]

thanks for the answer

[@marioleon86]

nice answer, I gave the channel a check

[@akinozgen]

i hate ionic because render times takes too much time even little changes, i hate react native because i'm spending my time to fix react-natives issues so can't focus on app development, i hate flutter because nested objects are ugly, i hate nativescript because i had to learn too much new components and styling. i guess time to learn kotlin and swift :)

[@akinozgen]

edit: down to flutter. it's really cool and fast actually.

[@Fireship]

I hear you!

[@Monster33336]

@@akinozgen Flutter really? Tell me more about your experience and if it gives you plenty of customizable options.

[@KlausLFuchs]

Xamarin?

[@n8ged8]

Anyone else checking if this video is playing in normal speed? :-)

[@rickyj1]

Biased... on time and reasoning. Although it is from Angular Firebase.

[@ishanmahajan7264]

Ionic too slow compared to recent techs

[@EssamSoft]

TL:DR; No! ☺️

[@theoligarchist1503]

i came here to see whats Ionic, but OH SHIT it needs Angular, BUT Angular is a MV* BS framework. whcih means ionic is BS too good video btw.

[@nabilizzullah6937]

It supports vue, react and svelte now

[@madhawapriyashantha3722]

Should you Build a Hybrid App? hell no ionic 4 will give you a headache

[@SebushMcChill]

ionic is crap!!! (slow, no platformready in appinitializer, no error-code-crash in pipelines on heapoutofmemory, no complex forms in alert-components, terrible navigation-stack in v3, no community, ...) angular+cordova only is much better in every single point