Improve the mobile experience by incorporating more Progressive Web App Techniques

[dadepo]

The YorubaName website, currently is quite responsive, which is good. This can be improved by incorporating more techniques as recommended by the progressive web app paradigm.

Notable things that we can add include:

• Discoverability/Installability
• Caching and improving robustness to flaky network
• Total offline mode should also be supported
• Introduce/update with more App-like UI
• Optimize asserts. This is related to Clean up unused Javascript lib and CSS #20
• etc.

If you would like to help with this issue, then a NoJsFramework approach is preferred.

[dadepo]

@temiyemi @daviskoko something you might be interested in?

[temiyemi]

Perhaps. Haven’t looked into PWAs yet, so an opportunity.

[daviskoko]

Well, I was looking at the WebApp & was wondering if VueJS would be helpful in collaboration with the template engine that the application is currently using. What do you think?

[Mich5]

Interested to get Involved in App UI and some progressive enhancement.

[dadepo]

@daviskoko Question is, what has vueJs got to do with PWA? As far as I can tell it is just a framework for building front-end component with or without PWA so It does not really come into play in this issue which is about making the website more progressive.

[dadepo]

@Mich5 Thanks for the interest. What you could do is to fork the project, make changes that adds the needed progressive enhancements and then make a pull request.
Some things that could help in getting started:

1. Check the blogpost that gives an overview on how to start contributing http://blog.yorubaname.com/2016/07/11/contribution-guidelines-for-yorubaname-codebase/
2. Watch the recorded webinar on how to get started working with the codebase https://www.youtube.com/watch?v=BKK80MmPS9Q
3. If you have any specific question, feel freel to pop into our dev chat room on gitter https://gitter.im/yorubaname-dictionary/dev

[daviskoko]

@dadepo Yes, it may not come into play with this particular issue, its probably something we might have to consider. However, I was thinking, if we use a frontend framework like Vue or Angular, we could have a better mobile experience and feel. Also, such frontend frameworks makes it easier for everyone to understand what is really going on in line with the PWA techniques that we seek to adapt. What am yet to look into is how it would play out with the template engine.

[temiyemi]

Okay. I didn’t even know about Vue.js until you mentioned it yesterday. And a quick look into it shows some similarity with Backbone.js.

From experience, I advice we go with Angular since we’re already using that on the Admin side of the same project.

[temiyemi]

Whichever the case, to go PWA, we can’t use server-side rendering. We’d have to do client side 100% just like the admin backend.

[daviskoko]

Take a look at this
https://vuejs.org/guide/comparison.html
I know that some of the points might be considered to be biased being that this comparison was made by Vue, but it worth looking at. If its gonna take us some time to grasp the concept of Vue, we can still stick with Angular.

[temiyemi]

Thanks for the link. Let’s use Angular, also because, we’re aiming to have a single front end in the near future: merge both admin front-end and the website together. And we already have lots of re-usable components on the backend at the moment.

[Mich5]

I also agree with angular because i have been building cordova apps with
ionic framework which is built on top of angular.
Also routing and data binding is very easy to do.

On Thu, Aug 18, 2016 at 1:59 PM, Yemi Agbetunsin [email protected]
wrote:

Thanks for the link. Let’s use Angular, also because, we’re aiming to have
a single front end in the near future: merge both admin front-end and the
website together. And we already have lots of re-usable components on the
backend at the moment.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#47 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/APtjOSzcvNr1bFMHqcG8WikdJidv88Z7ks5qhEkrgaJpZM4JmBB7
.

With Kind regards,

Michael Ngoma
WRISASOFT SOLUTIONS LTD

[dadepo]

PWA can be achieved without introducing any framework.

The progressive enhancement techniques are framework agnostic. This discussion should not even be about introducing another framework to the stack. Especially when introducing a new framework is not even needed for what needs to be achieved.

I would suggest to first understand what PWA is all about.

[dadepo]

Here is a quick start guide about PWA which builds a sample application following PWA without any mention of any extra framework https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en

Here is also another sample application https://github.com/GoogleChrome/airhorn that demonstrates offline storage (one of the techniques with PWA), if you look into the package.json you would see there is no MV* framework used.

This link https://developers.google.com/web/fundamentals/getting-started/?hl=en should help in getting more familiar with PWA ideas.

[daviskoko]

@dadepo I understand the concept of PWA, its a technique, pattern or guide, not a technological product & I came across it about 4 months ago & have been following the summits as well. Maybe we should talk more of the techniques & decide on framework in the chat group. But I still believe, that in following the PWA techniques, we might have to consider frameworks unless other wise we chin up and work with core javascript & jQuery. The reason I raised it here is 'cos i believe it would help the workflow in achieving the issue you raised & also help us think in the same direction.

[dadepo]

I am sceptical about introducing any MV* framework. The website, in principle is very simple: Search for names, show name entry. That is all. It offers no specialised or complex UI interactions.

So core JavaScript written following best practices in terms of code organization etc (with or without JQuery) is a very capable tool. Unless any implementation hits a road block, would I suggest we consider any of the frameworks out there.

[dadepo]

...and as @temiyemi already mentioned, if we would have to go with any framework, Angular would be a better choice as we already have it in the tech stack. Introducing yet another Js framework would add unnecessary cost to maintenance.

But we do not even need that at this moment. An Implementation using VanillaJs is what we should strive for.

[Mich5]

@dadepo Two way i have accomplished a progressive web app. One by using Polymer, which is a good idea as it utilizes web components (Another great way to achieve progressive enhancements) and uses only vanillasJS.
The other was just plain VanillaJS.

Since you said the site "offers no specialised or complex UI interactions", the best way is to go with plain vanillaJS. for a nice app like feel, Utilizing Polymer's Paper elements wouldn't be a bad idea. Its web components, any one can build a component for the app.

Are there plans of going full front end on this project?

[dadepo]

@Mich5 Yup, something like polymer sounds like a germane approach. I have not used it myself and I cant say if it brings in any overhead (I read though that it depends on a specialised build tool: Vulcanize, can't say if this would be an expensive overhead? or if it is even optional?).

But in general a polymer based approach is/should be a doable option. Maybe if you can try your hands at integrating it into the codebase first? you can then give us a feel of the effort/overhead vs benefits?