PWA Development Approach & Advice

I’d like to tap into your expertise if I may.

I have completed various training courses centred around PWA development. This has been pretty ok but also just the basics which is a good point to start. The main course consisted of creating a one page PWA that included the obvious stuff (like css, js and html, bootstrap) and pwa elements like Manifest, service worker etc) and other elements like Gulp.js, node.js (basic package management) amongst others however relevant.

When I look at the wireframe in all its glory, I take what I have learned and formulate an approach to it.

My history in the world of web is PHP, Jquery and building individual ‘pages’ and passing data between them using parameters (url and session data) and protecting/securing pages with session information. This approach would obviously mean creating multiple html documents in a site root that get displayed based on users interaction as per wireframe. It may see a bit old hat in a way.

The PWA training didn’t really resolve the approach to the many screens on the wireframe. There are plenty of js frameworks (hard to decide even which to learn, never mind choose). I understand you can create dynamic content with JS (covered a bit of that in training). All of this behind behind secure authentication of course.

So, basically I’d like a shove in a particular training route that would prepare me best and a view on your approach to getting this project to the best place.
Kindest Regards
Paul

Hi paulcullen,

Your talking about Progressive Web Apps, I guess. :slight_smile:

I have no idea, but to make it easier for the next guy, I’ll add a link to more info about the PWA thing:

https://developers.google.com/web/progressive-web-apps/

This video posted by another forum member provides a very good learning path for modern web application development. It is a tad bias but overall does a good job.

I believe Google has moved from PWA onto backing https://www.ampproject.org/ which works for mobiles and desktops.

I have created numerous pages using PHP and using the AmpProject FrameWork.

Your past PHP experience of passing data to templates will be beneficial once you understand the AmpProject Page Structure. There are a few obligatory sections which can be easily isolated and included into the web page.

Beware that normal W3C.org HTML Validation cannot be used and instead use the specific Amp Validations or include AmpProject Browser Addons and/or Extensions.

A side benefit is that Google supplies a free CDN Cache!

1 Like

I believe the intent is to build a dynamic web application using JavaScript and RESTful web services. I’ve never used AMP but the building blocks of any modern web application can be boiled down to REST and intuitive, dynamic JavaScript driven front-end. Storing data in a NoSQL or relational database. Those are the fundamental building blocks that come in many flavors.

All

  • Version control

Front-End Development:

  • ES6
  • Build Tools
  • component based architecture
  • asynchronous programming
  • reactive and redux programming
  • immutable functional programming
  • unit and integration testing
  • Modern CSS and HTML

Back-End Development

  • OOP
  • Restful web services
  • Security
  • Data persistence
  • Unit testing
  • Build Tools
  • Relational and None Relational databases
  • serverless and stateless architecture

DevOps

  • Cloud architecture
  • Continuous Integration
  • Deployment Tools/pipelines

The video I linked to provides a learning path for all of this. I intentionally left out specific tools because every environment building modern software will have their own preference putting aside the major/well known tools/languages for each area of study.

In regards to your specific question I would recommend starting with building a RESTful API with node.js on the express framework using a NoSQL database for data storage. That said it might be a good idea to model your API in RAML before ever even touching a line of code. As a side note and this is purely my opinion based on job listings and my interpretation of the state of the industry. The future for php looks very bleak with advances in JavaScript, Java, .NET, and other more capable/modern languages. I would recommend focusing completely on JavaScript unless you desire to end up supporting a legacy PHP project. Most PHP jobs I have seen are for supporting old, dirty legacy code not building brand new, modern web applications.

https://expressjs.com/

https://raml.org/

I think it is well worth giving AMP a try. The web pages include the latest JavaScript and the progressive web pages load really fast. Many large organisations are using the framework and you may have noticed that Google shows a little icon in their search results for valid Amp web pages.

https://www.ampproject.org/learn/overview/



Basic page from the above link:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-w<br>orld.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>


PHP Version:

<?php 
	declare(strict_types=1);
	error_reporting(-1);
	ini_set('display_errors', 'true');

	$title = 'hello-world.html';
	$style = file_get_contents( 'ampboilerplate.css' );

// using PHP HereDoc String Type
$ampPage = <<< ____TMP
<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="$title">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate> $style </style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
 	<h1> $title </h1>
 </body>
</html>
____TMP;

echo $ampPage;

Thank you so much for comments and advice. Really appreciated. Kind Regards.Paul

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.