Jump to content

Progressive Web Apps and Native Apps

kongondo

By kongondo,
in Dev Talk

 Share

Recommended Posts

kongondo Hero Member

kongondo

Posted
Posted

For a while now, I've wanted to expand my skills into mobile app development. Having done some Googling and watched several YouTube videos regarding native versus hybrid apps, I decided to go native. I did my homework regarding React, Ionic, etc and decided to go native. I settled on the NativeScript + TypeScript combo although it seems most tutorials are about Angular. Anyway, after watching quite a number of videos, just when I was about to dive into things, someone turned off the lights! Progressive what? PWA? Haven't you heard about this? No, I haven't! Where have you been? Let's not go there...

OK, so I don't know much about mobile apps as you can tell (or even much about frontend development as my personal websites do tell, :P). At first, I dismissed Progressive Web Apps as another Google tech that is bound to fail....until I read that Twitter, Blah Blah, have joined the bandwagon and the thing is gaining serious traction.

It was back to more Googling. I now know (I think) what Progressive Web Apps are (or are meant to be). Naturally, my first question was Progressive Web Apps versus Native apps. So, I asked Google. Google told me to stop asking that question. To be precise, it told me (at least with the first couple of results) that that was the wrong question to ask! I tried finding out why, but the answer was hidden down some deep mobile rabbit hole that I didn't have time to fully descend into. 

It seems I am back to where I started. Native apps seem to be promising first class citizenship (who doesn't want that?). On the other hand, I am being told, Progressive Web Apps are the bright shiny future that will solve all our problems (and maybe even shutdown the Play Store! ???). Please be gentle with my ignorant self. I have asked Google but she hasn't bothered or cannot be bothered to reply or I am asking her the wrong questions. I simply want to know if Progressive Web Apps can or will one day be able to be used to:

  1. Build apps like WhatsApp, etc?
  2. Build games like Candy Crush (what?)?
  3. Build premium apps (how would that work?)

Or...are Progressive Web Apps just a replacement for mobile.domain.com? Should I ditch my NativeScript??

If someone could help me out here (once you're done laughing at my silly questions :lol:) and/or point me to resources that will answer my questions, I'll be forever grateful :).

Thanks

 

  • Like 4
Link to comment
Share on other sites
teppo Hero Member

teppo

Posted
Posted

I ran a poll about PWA's in #174 of ProcessWire Weekly and included a couple of useful links: https://weekly.pw/issue/174/. 

  Quote

That being said, if you feel that you don't have the slightest idea what Progressive Web Apps are, I'd suggest starting out with the introductory article Yes, That Web Project Should Be a PWA at A List Apart, or Your First Progressive Web App at Google's WebFundamentals.

Expand  

Check out https://pwa.rocks/ too, some nice examples there :)

Google calls PWA's "a new way to deliver amazing user experiences on the web", which obviously explains absolutely nothing about them. The A List Apart article mentioned above is a great resource, in my opinion, so definitely check that one out. Ionic also has a pretty good introductory article: https://blog.ionicframework.com/what-is-a-progressive-web-app/.

In a nutshell PWA's make use of various Web APIs and technologies, such as JavaScript, Service Workers, etc. They provide a "native like" experience, but are not native apps – so, to answer your questions the best I can, I'd say that ...

  1. as far as it's doable with web technologies (yes),
  2. as long as you can do it with JavaScript (yes), and
  3. I'm pretty sure you can, but I have no idea how, except for the point that since a PWA is essentially a "website with superpowers" (not my quote, but can't remember the source right now) it's probably mostly the same process as with any "regular" premium website.

That being said, I've also got native mobile app development on my bucket list, where it'll remain even taking PWA's into consideration. For certain things native apps are still a better choice, and serious game development is one of those.

  • Like 6
Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted
  On 2/6/2018 at 11:31 AM, kongondo said:

Progressive Web Apps can or will one day be able to be used to:

  1. Build apps like WhatsApp, etc?
  2. Build games like Candy Crush (what?)?
  3. Build premium apps (how would that work?)
Expand  

Yes (https://github.com/renganatha10/whatspp-PWA)

Yes (https://www.progressivewebapproom.com/)

I don't know what a premium app is :)

I think this is a good read: https://blog.ionicframework.com/what-is-a-progressive-web-app/

You could even build these things in "hybrid" apps - Cordova plugins give access to camera, mic, etc and there are lots of JS game building libraries out there. I think browsers and JS are getting so powerful now that you can build anything without going "native".

  • Like 6
Link to comment
Share on other sites
Macrura Hero Member

Macrura

Posted
Posted

I had a client who wanted to have an app, but were not planning on building a native app (I think they were planning on a basic wrapper app that connected to a PW json feed). Once i finally hammered down the precise requirements, it turned out there was an assumption that their app would be able to do push notifications to the home screen. My research led me to the conclusion that only native apps can do push notifications to the homescreen, and the app idea was dropped...

 

 

  • Like 2
Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted
  On 2/7/2018 at 8:33 PM, Macrura said:

I had a client who wanted to have an app, but were not planning on building a native app (I think they were planning on a basic wrapper app that connected to a PW json feed). Once i finally hammered down the precise requirements, it turned out there was an assumption that their app would be able to do push notifications to the home screen. My research led me to the conclusion that only native apps can do push notifications to the homescreen, and the app idea was dropped...

 

 

Expand  

Not sure if this does what you want: https://ionicframework.com/docs/native/push/ 

  • Like 1
Link to comment
Share on other sites
szabesz Hero Member

szabesz

Posted
Posted
  On 2/8/2018 at 12:43 AM, Macrura said:

AFAIK that is not native..

Expand  

Sure, but as Adrian said the core and its plugins are "native". What else could they be? Last time I built an app with Cordova was 5 years ago and it was pretty problematic but it worked for sure. I guess since then things must have matured a lot and naturally developing hybrid apps takes a lot less time, also you do not have to learn Java, Swift, Objective-C, "all at the same time" but you can put to use a great deal of knowledge you already have. Last winter I googled around to see what is available to ease Corodva based development and by spending a day on the research I concluded that ionicframework.com is the one I would pick. No project in sight for me though, so I stick to PW these days :)

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
  • Author
Posted (edited)

Thanks for the input guys!

  On 2/6/2018 at 3:25 PM, adrian said:

I don't know what a premium app is :)

Expand  

An app that you have to pay to use/install :).

  On 2/8/2018 at 6:03 AM, szabesz said:

developing hybrid apps takes a lot less time

Expand  

So, I am told...but at the cost of what? You get a slower app? Just what I've read. But the point about using technology you already know (HTML, etc) is a good thing (most times).

  On 2/8/2018 at 6:03 AM, szabesz said:

also you do not have to learn Java, Swift, Objective-C, "all at the same time"

Expand  

I think it depends on the language  you are using. If developing. If using TypeScript + NativeScript, all you need to know is JavaScript :) (and CSS and (X)HTML)).

  On 2/7/2018 at 8:33 PM, Macrura said:

only native apps can do push notifications to the homescreen

Expand  

Is this still the case or am I misunderstanding the below?

https://auth0.com/blog/introduction-to-progressive-web-apps-push-notifications-part-3/

https://dockyard.com/blog/2017/07/13/safari-ios-and-progressive-web-apps

  On 2/6/2018 at 3:25 PM, teppo said:

That being said, I've also got native mobile app development on my bucket list, where it'll remain even taking PWA's into consideration. For certain things native apps are still a better choice, and serious game development is one of those.

Expand  

Sound advice. I think I'll take this approach, albeit start with native and get into PWA's later.

Edited by kongondo
  • Like 1
Link to comment
Share on other sites
szabesz Hero Member

szabesz

Posted
Posted
  On 2/8/2018 at 11:30 AM, kongondo said:
  On 2/8/2018 at 6:03 AM, szabesz said:

developing hybrid apps takes a lot less time

Expand  

So, I am told...but at the cost of what? You get a slower app? Just what I've read. But the point about using technology you already know (HTML, etc) is a good thing (most times).

Expand  

Yeah, pros and cons. It all depends on what you want to develop. For games, being native is the best option but anything else can be ok built on Cordova. "Speed" (regarding both app performance and development time) highly depends on the framework(s) being used. I do not really have a lot of experience so I am not the one to get into deeper details, I just wanted to draw attention to a few important points.

Link to comment
Share on other sites
psy Hero Member

psy

Posted
Posted

Major head spin right now.

Downloaded & installed Stencil, read up on Vue.js and downloaded @thomasaull's REST API profile and read Google's PWA stuff all because a simple site I wrote is getting crazy scores on Google's page speed insights yet client loves how fast the site loads on mobile :'(

Link to comment
Share on other sites
Sergio Hero Member

Sergio

Posted
Posted
  On 2/8/2018 at 12:43 AM, Macrura said:

is that a 'native' thing, i don't know much about ionic.. They started building it in Cordova/PhoneGap, but AFAIK that is not native..

Expand  

Developing a mobile app is a lot of pain, trust me, so for the new version of my client's app, we decided to trash our bespoke version (made using Appcelerator Titanium) and sign up for a service that takes this pain away. After comparing features and pricing, the client decided for using GoodBarber.com and is pretty happy (currently paying $48/month).

The app is pretty simple but met our objectives. GoodBarber enables push notifications but we not using though, as it doesn't work for our main content: podcasts episodes that came from Soundcloud feed.

The app in questions is this one:

https://itunes.apple.com/br/app/project-management-connector-with-ricardo-vargas/id385663838?mt=8

https://play.google.com/store/apps/details?id=com.goodbarber.pmconnector

  • Like 1
Link to comment
Share on other sites
  • 7 months later...
szabesz Hero Member

szabesz

Posted
Posted

Related good article on Android app development at i-programmer.info :

https://www.i-programmer.info/news/193-android/12177-android-studio-32-released-more-cruft-than-substance.html

quotes:

  • "So what is the latest revolution we have to suffer?"
  • "Who knows what is Android best practice any more? The one thing we can all be sure of is that our old apps, of even six months ago, are all probably legacy."
  • "The bottom line is that the Android forest has grown so much that not only can you not see the trees any more, all you can see are the weeds. If you go to the documentation you usually can't determine what is best practice and it is quite possible to spend months working on implementing something only to discover that there is some completely different way of doing it that is now the only way to do it."
  • Like 2
Link to comment
Share on other sites
  • 7 months later...
kongondo Hero Member

kongondo

Posted
  • Author
Posted

A year or so later, I have seen the future. Actually, I just stumbled upon it. Just when I was diving into Angular + TypeScript + NativeScript for mobile apps, I recently came across this thing, Flutter. I have been totally blown away! The last time I was this excited was when I discovered ProcessWire :-).

Long story short, before I ended up here, I was looking at Kivy and BeeWare. I managed to pick up Python along the way. Kivy looks promising. I am interested in both mobile and desktop apps and it ticks those boxes. Then along comes Flutter and wow! Cross platform, write once deploy everywhere (iOS, Android, Embedded, Windows, Mac). It's still early days but I am totally convinced. I was a bit hesitant because it is a Google project (you know, their history of killing off projects...) but since it is open source and there are some big players already involved, I am sold. Flutter compiles to machine code! It comes with lots of widgets out of the box, both for iOS and Android. You can also ask it to compile to JavaScript (like TypeScript can and does).

To program in Flutter you use Dart, a language developed by Google. I came across Dart a while back. Back then, it was considered a dead language. It has made a resurgence, thanks to Flutter. If you know your OOP and JavaScript, it is very easy to pick up, in an hour or so. If looking at Flutter, have a look at Hummingbird as well.

What do you folks think? Anyone used Flutter before?

  • Like 9
Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
  • Author
Posted
  On 5/28/2019 at 9:23 AM, horst said:

A while ago I bookmarked this: https://css-tricks.com/flutter-googles-take-on-cross-platform/

Expand  

It's amazing how much progress they've made since that article. was written

For those thinking of diving into Flutter/Dart or even just Dart, don't be scared ?. An advantage we have as PW developers is the OOP side of PHP. Coupled with CSS (styling, box model, etc) and HTML (widget-like structures) plus JavaScript, it makes the dive into Dart (and other [modern] languages) not-so-painful. So you call it a Map we call it an Associative Array (or Dictionary in Python).  You call it a List, we call it an Array. So you have collection.map()...that looks familiar. It's dot notation and I've seen map in JavaScript. We can do that, but we also know $this->something....etc. 

The flutter widget inspector looks really cool, btw. I am also happy that my code of choice, VSC, has Dart plugins and is mentioned in the official Flutter/Dart pages.

Me and my ramblings...?

  • Like 3
Link to comment
Share on other sites
LostKobrakai Hero Member

LostKobrakai

Posted
Posted

I'm not yet fully sold on Flutter. I like the idea behind it and it's certainly appealing for cross platform mobile dev, but it also feels super verbose and you still probably need to handle two versions of your app if you really want to adhere to the UI/UX patterns of the different platforms. Having one codebase is certainly making it easier, but it imho doesn't remove the issue. This is even more apparent if you look at the differences of desktop apps. Also with its focus on UI development I'm not really sure where I should put it when it comes to non-UI tasks, which are as important if you need to do anything without being connected to some server elsewhere. Given I'm working with elixir for most of my time OOP additionally becomes less and less appealing ?

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
  • Author
Posted (edited)
  On 5/28/2019 at 2:30 PM, LostKobrakai said:

Also with its focus on UI development I'm not really sure where I should put it when it comes to non-UI tasks, which are as important if you need to do anything without being connected to some server elsewhere

Expand  

That's where Dart comes in :-). Have a look at the docs and examples. With Dart alone, you can build anything from backend servers, console programs and anything in between.

  On 5/28/2019 at 2:30 PM, LostKobrakai said:

you still probably need to handle two versions of your app if you really want to adhere to the UI/UX patterns of the different platforms.

Expand  

Erm, no you don't. Look at the real world examples/showcase. We are talking Alibaba, Reflectly, Hamilton Musical, and the likes.  For iOS we have Cupertino Material design. I am not saying these alone are enough to go by but so far, and I have done extensive research, I have yet to come across anyone mentioning that they have to maintain two code bases. In fact, they all say quite the opposite - they have done away with two code bases and their UI renders exactly as they intended in their targeted platforms.

  On 5/28/2019 at 2:30 PM, LostKobrakai said:

feels super verbose

Expand  

How so?

The only thing I don't like so far is the styling and structure baked right inside the widgets. 

I think flutter had the advantage of learning from other solutions and picking the best bits and improving on the not-so-good bits. I am not a zealot (yet :-)), but the more I dive deeper into Dart and Flutter, the more I get convinced that Google got this one right :-).

Edited by kongondo
  • Like 2
  • Thanks 1
Link to comment
Share on other sites
  • 8 months later...
kongondo Hero Member

kongondo

Posted
  • Author
Posted

You go away for a minute and this is what happens...?

TL;DR

From Device-centric to App-centric development: ambient computing

  1. Dart and Flutter ranked #1 and #2 for fastest-growing language and open source project respectively over the last twelve months - GitHub’s 2019 State of the Octoverse report.
  2. Flutter is now one of the ten most starred software repos on GitHub.
  3. Flutter described as “the fastest-growing skill among software engineers”. LinkedIn, 2019.
  4. Flutter for web is in beta.
  5. Flutter for desktop is in alpha for mac-OS.
  6. You can edit Flutter code, run it and view the rendered UI online in DartPad. See the samples drop-down on the top-right.
  7. Adobe XD, Supernova, etc: flutter plugins.

Full announcement here. Videos here (Flutter Interact 2019).

  • Like 7
  • Thanks 1
Link to comment
Share on other sites
  • 3 weeks later...
  • 2 months later...
 Share
Go to topic listing
×
×
  • Create New...