Jump to content
kongondo

Progressive Web Apps and Native Apps

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

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

Share this post


Link to post
Share on other sites
3 hours ago, 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?)

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
2 hours ago, 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...

 

 

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

Share this post


Link to post
Share on other sites

Cordova/Phonegap are for building hybrid apps, but there are several "native" cordova plugins for things like access to the camera and various sensors, and in that case, also for displaying notifications.

Here's the list of cordova plugins you can use:
https://cordova.apache.org/plugins/

  • Like 2

Share this post


Link to post
Share on other sites

thanks, that's very good to know, might try and revisit the app with them now that you have enlightened me!

  • Like 2

Share this post


Link to post
Share on other sites
5 hours ago, Macrura said:

AFAIK that is not native..

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 :)

Share this post


Link to post
Share on other sites

Thanks for the input guys!

On 06/02/2018 at 3:25 PM, adrian said:

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

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

5 hours ago, szabesz said:

developing hybrid apps takes a lot less time

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).

5 hours ago, szabesz said:

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

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)).

14 hours ago, Macrura said:

only native apps can do push notifications to the homescreen

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 06/02/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.

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

Edited by kongondo
  • Like 1

Share this post


Link to post
Share on other sites
5 minutes ago, kongondo said:
5 hours ago, szabesz said:

developing hybrid apps takes a lot less time

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).

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.

Share this post


Link to post
Share on other sites
Just now, szabesz said:

I just wanted to draw attention to a few important points.

Hence this discussion. I am learning as well, so thanks for your pointers :).

  • Like 1

Share this post


Link to post
Share on other sites

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 :'(

Share this post


Link to post
Share on other sites

Some loosely related observations re PWA vs. native: 

 

  • Like 3

Share this post


Link to post
Share on other sites
On 2/7/2018 at 10:43 PM, 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..

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
1 hour ago, horst said:

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

Share this post


Link to post
Share on other sites

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 😛

Share this post


Link to post
Share on other sites
Posted (edited)
2 hours ago, 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

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.

2 hours ago, 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.

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.

2 hours ago, LostKobrakai said:

feels super verbose

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

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By schwarzdesign
      We recently rebuilt the Architekturführer Köln (architectural guide Cologne) as a mobile-first JavaScript web app, powered by VueJS in the frontend and ProcessWire in the backend. Concept, design and implementation by schwarzdesign!
      The Architekturführer Köln is a guidebook and now a web application about architectural highlights in Cologne, Germany. It contains detailled information about around 100 objects (architectural landmarks) in Cologne. The web app offers multiple ways to search through all available objects, including:
      An interactive live map A list of object near the user's location Filtering based on architect, district and category Favourites saved by the user The frontend is written entirely in JavaScript, with the data coming from a ProcessWire-powered API-first backend.
      Frontend
      The app is built with the Vue framework and compiled with Webpack 4. As a learning exercise and for greater customizability we opted to not use Vue CLI, and instead wrote our own Webpack config with individually defined dependencies.
      The site is a SPA (Single Page Application), which means all internal links are intercepted by the Vue app and the corresponding routes (pages) are generated by the framework directly in the browser, using data retrieved from the API. It's also a PWA (Progressive Web App), the main feature of which is that you can install it to your home screen on your phone and launch it from there like a regular app. It also includes a service worker which catches requests to the API and returns cached responses when the network is not available. The Architekturführer is supposed to be taken with you on a walk through the city, and will keep working even if you are completely offline.
      Notable mentions from the tech stack:
      Vue Vue Router for the SPA functionality VueX for state management and storage / caching of the data returned through the API Leaflet (with Mapbox tiles) for the interactive maps Webpack 4 for compilation of the app into a single distributable Babel for transpilation of ES6+ SASS & PostCSS with Autoprefixer as a convenience for SASS in SFCs Google Workbox to generate the service worker instead of writing lots of boilerplate code Bootstrap 4 is barely used here, but we still included it's reboot and grid system Backend
      The ProcessWire backend is API-only, there are no server-side rendered templates, which means the only PHP template is the one used for the API. For this API, we used a single content type (template) with a couple of pre-defined endpoints (url segments); most importantly we built entdpoints to get a list of all objects (either including the full data, or only the data necessary to show teaser tiles), as well as individual objects and taxonomies. The API template which acts as a controller contains all the necessary switches and selectors to serve the correct response in <100 lines of code.
      Since we wanted some flexibility regarding the format in which different fields were transmitted over the api, we wrote a function to extract arbitrary page fields from ProcessWire pages and return them as serializable standard objects. There's also a function that takes a Pageimage object, creates multiple variants in different sizes and returns an object containing their base path and an array of variants (identified by their basename and width). We use that one to generate responsive images in the frontend. Check out the code for both functions in this gist.
      We used native ProcessWire data wherever possible, so as to not duplicate that work in the frontend app. For example:
      Page names from the backend translate to URLs in the frontend in the form of route parameters for the Vue Router Page IDs from ProcessWire are included in the API responses, we use those to identify objects across the app, for example to store the user's favourites, and as render keys for object lists Taxonomies have their own API endpoints, and objects contain their taxonomies only as IDs (in the same way ProcessWire uses Page References) Finally, the raw JSON data is cached using the cache API and this handy trick by @LostKobrakai to store raw JSON strings over the cache API.
      Screenshots














    • By Noel Boss
      ProcessWire & Vue.js — a Lovestory
      Introducing the all new ICF Conference Website
        The new ICF Conference Page — Fearless
      » What would happen if we were equipped to fearlessly face the daily challenges and live a life without fear? «
      This question is at the core of our next ICF Conference in 2019 in Zurich. Its also the question we set out to answer in terms of developing the new website; the all new ICF Conference website is our most advanced website in terms of technology, designed to take advantage of the latest web-technologies.
      Its a brand new design powered by a lean setup, using ProcessWire for easy content management and a slick frontend based on Vue.js, Quasar and a heavily customized Uikit theme.
        Technology-stack — From backend to frontend, technologies that are fun, easy and fast to develop with We built on the ICF Ladieslounge website as a solid foundation and took our learnings from building our last Conference Booklet PWA (Progressive Web App) and applied it to the new website.
      Some highlights of the new ICF Conference website:
      Completely decoupled backend and frontend Custom design based on Uikit frontend framework Changing of languages happens instantly, no page-reload required Easy content updates thanks to ProcessWire All data is transferred using a single request returning custom JSON



      » Continue reading on Medium
      And please don't forget to clap and share: 

       
    • By Noel Boss
      Page Query Boss
      Build complex nested queries containing multiple fields and pages and return an array or JSON. This is useful to fetch data for SPA and PWA.
      You can use the Module to transform a ProcessWire Page or PageArray – even RepeaterMatrixPageArrays – into an array or JSON. Queries can be nested and contain closures as callback functions. Some field-types are transformed automatically, like Pageimages or MapMarker.
      Installation
      Via ProcessWire Backend
      It is recommended to install the Module via the ProcessWire admin "Modules" > "Site" > "Add New" > "Add Module from Directory" using the PageQueryBoss class name.
      Manually
      Download the files from Github or the ProcessWire repository: https://modules.processwire.com/modules/page-query-builder/
      Copy all of the files for this module into /site/modules/PageQueryBoss/ Go to “Modules > Refresh” in your admin, and then click “install” for the this module. Module Methods
      There are two main methods:
      Return query as JSON
      $page->pageQueryJson($query); Return query as Array
      $page->pageQueryArray($query); Building the query
      The query can contain key and value pairs, or only keys. It can be nested and 
      contain closures for dynamic values. To illustrate a short example:
      // simple query: $query = [ 'height', 'floors', ]; $pages->find('template=skyscraper')->pageQueryJson($query); Queries can be nested, contain page names, template names or contain functions and ProcessWire selectors:
      // simple query: $query = [ 'height', 'floors', 'images', // < some fileds contain default sub-queries to return data 'files' => [ // but you can also overrdide these defaults: 'filename' 'ext', 'url', ], // Assuming there are child pages with the architec template, or a // field name with a page relation to architects 'architect' => [ // sub-query 'name', 'email' ], // queries can contain closure functions that return dynamic content 'querytime' => function($parent){ return "Query for $parent->title was built ".time(); } ]; $pages->find('template=skyscraper')->pageQueryJson($query); Keys:
      A single fieldname; height or floors or architects 
      The Module can handle the following fields:
      Strings, Dates, Integer… any default one-dimensional value Page references Pageimages Pagefiles PageArray MapMarker FieldtypeFunctional A template name; skyscraper or city
      Name of a child page (page.child.name=pagename); my-page-name A ProcessWire selector; template=building, floors>=25
      A new name for the returned index passed by a # delimiter:
      // the field skyscraper will be renamed to "building": $query = ["skyscraper`#building`"]  
      Key value pars:
      Any of the keys above (1-5) with an new nested sub-query array:
      $query = [ 'skyscraper' => [ 'height', 'floors' ], 'architect' => [ 'title', 'email' ], ]  
      A named key and a closure function to process and return a query. The closure gets the parent object as argument:
      $query = [ 'architecs' => function($parent) { $architects = $parent->find('template=architect'); return $architects->arrayQuery(['name', 'email']); // or return $architects->explode('name, email'); } ] Real life example:
      $query = [ 'title', 'subtitle', // naming the key invitation 'template=Invitation, limit=1#invitation' => [ 'title', 'subtitle', 'body', ], // returns global speakers and local ones... 'speakers' => function($page){ $speakers = $page->speaker_relation; $speakers = $speakers->prepend(wire('pages')->find('template=Speaker, global=1, sort=-id')); // build a query of the speakers with return $speakers->arrayQuery([ 'title#name', // rename title field to name 'subtitle#ministry', // rename subtitle field to ministry 'links' => [ 'linklabel#label', // rename linklabel field to minlabelistry 'link' ], ]); }, 'Program' => [ // Child Pages with template=Program 'title', 'summary', 'start' => function($parent){ // calculate the startdate from timetables return $parent->children->first->date; }, 'end' => function($parent){ // calculate the endate from timetables return $parent->children->last->date; }, 'Timetable' => [ 'date', // date 'timetable#entry'=> [ 'time#start', // time 'time_until#end', // time 'subtitle#description', // entry title ], ], ], // ProcessWire selector, selecting children > name result "location" 'template=Location, limit=1#location' => [ 'title#city', // summary title field to city 'body', 'country', 'venue', 'summary#address', // rename summary field to address 'link#tickets', // rename ticket link 'map', // Mapmarker field, automatically transformed 'images', 'infos#categories' => [ // repeater matrix! > rename to categories 'title#name', // rename title field to name 'entries' => [ // nested repeater matrix! 'title', 'body' ] ], ], ]; if ($input->urlSegment1 === 'json') { header('Content-type: application/json'); echo $page->pageQueryJson($query); exit(); } Module default settings
      The modules settings are public. They can be directly modified, for example:
      $modules->get('PageQueryBoss')->debug = true; $modules->get('PageQueryBoss')->defaults = []; // reset all defaults Default queries for fields:
      Some field-types or templates come with default selectors, like Pageimages etc. These are the default queries:
      // Access and modify default queries: $modules->get('PageQueryBoss')->defaults['queries'] … public $defaults = [ 'queries' => [ 'Pageimages' => [ 'basename', 'url', 'httpUrl', 'description', 'ext', 'focus', ], 'Pagefiles' => [ 'basename', 'url', 'httpUrl', 'description', 'ext', 'filesize', 'filesizeStr', 'hash', ], 'MapMarker' => [ 'lat', 'lng', 'zoom', 'address', ], 'User' => [ 'name', 'email', ], ], ]; These defaults will only be used if there is no nested sub-query for the respective type. If you query a field with complex data and do not provide a sub-query, it will be transformed accordingly:
      $page->pageQueryArry(['images']); // returns something like this 'images' => [ 'basename', 'url', 'httpUrl', 'description', 'ext', 'focus'=> [ 'top', 'left', 'zoom', 'default', 'str', ] ]; You can always provide your own sub-query, so the defaults will not be used:
      $page->pageQueryArry([ 'images' => [ 'filename', 'description' ], ]); Overriding default queries:
      You can also override the defaults, for example
      $modules->get('PageQueryBoss')->defaults['queries']['Pageimages'] = [ 'basename', 'url', 'description', ]; Index of nested elements
      The index for nested elements can be adjusted. This is also done with defaults. There are 3 possibilities:
      Nested by name (default) Nested by ID Nested by numerical index Named index (default):
      This is the default setting. If you have a field that contains sub-items, the name will be the key in the results:
      // example $pagesByName = [ 'page-1-name' => [ 'title' => "Page one title", 'name' => 'page-1-name', ], 'page-2-name' => [ 'title' => "Page two title", 'name' => 'page-2-name', ] ] ID based index:
      If an object is listed in $defaults['index-id'] the id will be the key in the results. Currently, no items are listed as defaults for id-based index:
      // Set pages to get ID based index: $modules->get('PageQueryBoss')->defaults['index-id']['Page']; // Example return array: $pagesById = [ 123 => [ 'title' => "Page one title", 'name' => 123, ], 124 => [ 'title' => "Page two title", 'name' => 124, ] ] Number based index
      By default, a couple of fields are transformed automatically to contain numbered indexes:
      // objects or template names that should use numerical indexes for children instead of names $defaults['index-n'] => [ 'Pageimage', 'Pagefile', 'RepeaterMatrixPage', ]; // example $images = [ 0 => [ 'filename' => "image1.jpg", ], 1 => [ 'filename' => "image2.jpg", ] ] Tipp: When you remove the key 'Pageimage' from $defaults['index-n'], the index will again be name-based.
       
      Help-fill closures & tipps:
      These are few helpfill closure functions you might want to use or could help as a
      starting point for your own (let me know if you have your own):

      Get an overview of languages:
          $query = ['languages' => function($page){         $ar = [];         $l=0;         foreach (wire('languages') as $language) {             // build the json url with segment 1             $ar[$l]['url']= $page->localHttpUrl($language).wire('input')->urlSegment1;             $ar[$l]['name'] = $language->name == 'default' ? 'en' : $language->name;             $ar[$l]['title'] = $language->getLanguageValue($language, 'title');             $ar[$l]['active'] = $language->id == wire('user')->language->id;             $l++;         }         return $ar;     }]; Get county info from ContinentsAndCountries Module
      Using the [ContinentsAndCountries Module](https://modules.processwire.com/modules/continents-and-countries/) you can extract iso
      code and names for countries:
          $query = ['country' => function($page){         $c = wire('modules')->get('ContinentsAndCountries')->findBy('countries', array('name', 'iso', 'code'),['code' =>$page->country]);         return count($c) ? (array) $c[count($c)-1] : null;     }]; Custom strings from a RepeaterTable for interface
      Using a RepeaterMatrix you can create template string for your frontend. This is
      usefull for buttons, labels etc. The following code uses a repeater with the
      name `strings` has a `key` and a `body` field, the returned array contains the `key` field as,
      you guess, keys and the `body` field as values:
          // build custom translations     $query = ['strings' => function($page){         return array_column($page->get('strings')->each(['key', 'body']), 'body', 'key');     }]; Multilanguage with default language fallback
      Using the following setup you can handle multilanguage and return your default
      language if the requested language does not exist. The url is composed like so:
      `page/path/{language}/{content-type}` for example: `api/icf/zurich/conference/2019/de/json`
       
          // get contenttype and language (or default language if not exists)     $lang = wire('languages')->get($input->urlSegment1);     if(!$lang instanceof Nullpage){         $user->language = $lang;     } else {         $lang = $user->language;     }     // contenttype segment 2 or 1 if language not present     $contenttype = $input->urlSegment2 ? $input->urlSegment2 : $input->urlSegment1;     if ($contenttype === 'json') {         header('Content-type: application/json');         echo $page->pageQueryJson($query);         exit();     } Debug
      The module respects wire('config')->debug. It integrates with TracyDebug. You can override it like so:
      // turns on debug output no mather what: $modules->get('PageQueryBoss')->debug = true; Todos
      Make defaults configurable via Backend. How could that be done in style with the default queries?
      Module in alpha Stage: Subject to change
      This module is in alpha stage … Query behaviour (especially selecting child-templates, renaming, naming etc)  could change
    • By psy
      Rebuilt my own site recently using all the knowledge, tips & tricks I've learnt from the PW docs, forums etc, including adding PWA features. 
      Ran it through several publicly available audits and it passed OK - w3c validation, google page speed insights, google lighthouse, etc. Also engaged a digital marketing agency to audit it from a Google search POV.  Still some tweaking to do on content & backlink fronts.
      Overall though happy with the result which could never have been achieved without the help and support of the ProcessWire community. Thank each and everyone of you.
      https://www.clipmagic.com.au
       
       
       
    • By clsource
      Hello,
      I just want to point out this framework for making html apps https://onsen.io/
      it's compatible with jquery, angular, vue, react or any other js framework.
      So far I made an app using this and bootstrap with https://propeller.in/
      for the desing and some libs like jquery and lodash for the app logic
      I prefer this to other alternatives like ionic since it does not bound you to angular or react.
       
      Cheers
×
×
  • Create New...