Cross-Platform Web Development

HTML All The Things - Web Development, Web Design, Small Business

Matt's freshly back from vacation to discuss developing for multiple platforms using various tools such as Apache Cordova, React Native, and Ionic. Allowing developers to use what they're familiar with, and still make apps for a variety of platforms.

Segment 1 - When to Use/Not Use Cross-Platform Development

• Cross Platform Web Development allows you to build apps in Javascript that you can then use as native apps on iOS, Android and even Windows
• This allows developers that are already familiar with JavaScript to great native experiences without having to learn new languages
• In some cases, like with Apache Cordova a team can use one single code base with some hooks for different platforms to build their application for the web, android and ios
• This allows for more agile development and smaller development teams as you don’t have resources tied up in native app development
• This issues arise when needing to perform complex multimedia tasks like constantly playing audio and video
• As we’ve experienced heavy media tasks can cause crashes in webviews where native code might perform just fine
• Just beware when decided to go with cross platform development because you can never simulate the performance of a native application, so if buttery smooth animations and lightening quick load actions are important to you, the native way is prefered
• For a small business though, like a bakery or restaurant, if they want an application that resembles their website then using a cross platform framework is ideal because it can save them money and give them the functionality they desire

Segment 2 - Cross-Platform Technologies

• Apache Cordova
  
  • https://cordova.apache.org/
  • Its free and open source
  • A plugin that allows you to create native applications out of standard website code (HTML, JS, CSS)
  • Provides developers the opportunity to create only one main code base for all platform
  • Also the main advantages of cross platform technologies are they give you the ability to create a offline mode and access native api’s such as push notifications, file systems, etc
  • It is necessary to create hooks that change how the application loads depending on if it’s on the web or if it's packaged as a native application
• React Native and Nativescript with Vue.js
  • https://facebook.github.io/react-native/
  • https://www.nativescript.org/vue
  • Both of these frameworks allow for development on both Android and iOS
  • They use a very similar structure to their corresponding technologies with some minor differences when it comes to views, as xml is used to construct layouts
  • Both use JS as their scripting language
  • These frameworks allow developers that a familiar with React or Vue to build Native applications that perform very close to their Obj C or Java counterparts
• Ionic
  • https://ionicframework.com/
  • Allows you to make web apps into desktop applications for both MacOS and Windows

Segment 3 - Progressive Web Apps

• These are websites or web applications that with minor adjustments give the user native functionality straight for the browser
• This doesn’t require you to have to build the application and package it for a specific platform (i.e Android, iOS), the newest browsers, safari and chrome both can auto detect if you have a progressive web app in the browser and the prompt the user of the functionality
• To create a PWA there are only a few steps required:
  • Site has to be HTTPS secured
  • Page need to be responsive for mobile devices
  • Page needs to use Service Workers to load URLS offline
    • A service work is a background script that can be created and tied to your webpage but which does not have access to your DOM elements
    • Through the service worker you can access the native API’s of you desired system like push notifications
    • They can also be used to process parallel tasks as service workers run on their own threads (cores)
  • A Web App Manifest file which allows you to put information and image data for adding your application right to the users home screen on their device (like a real application)
  • The site must be able to load ‘fast’ on a 3G connection
• https://www.pwabuilder.com/
  • Really interesting utility that allows you put in your websites URL and gives you a list of steps plus helps you create the necessary changes to make it a PWA
• PWA’s I’ve used
  • Twitter has a really good PWA, allowing you to not have to worry about installing another application
  • Telegram message application has a good PWA that work on both PC and Mobile

Web News - Strict Learning

• Disclaimer: We are not education experts in any way, we discussed this and wrote the notes below based on our personal experiences.
• Schools seem to want you to do it right the first time, or risk losing marks, time, or electronic components in the case of our college labs
• Meanwhile actual learning is supposed to be filled with mistakes and experimenting so that you can figure out what works and what doesn’t
• Example: In college, we would receive a new set of components for our labs that would be conducted throughout the semester, however, we would receive a limited set of components - sometimes with spares, sometimes we’d only have one of each
  • You could purchase more if they were in stock, but that’s expensive for a student
  • These components are generally cheap electronic components - yet we were expected not to break them, or have a bunch of DOA components
  • This discouraged messing around with circuits and caused a lot of checking over and over to ensure your circuit was correct before hooking it up to power
• When we learn new web technologies we typically end up setting it up incorrectly a few times, and have plethora of errors throughout the process as we figure out how things should be working.
  • This type of learning I find personally the best for understanding what you’re doing and what you can/can’t do with a piece of technology, however, this could get you docked valuable marks in school
• The counter argument is that you should make all your mistakes before the test, however, in college especially, those “in-between” marks can add up to 10% or more of your overall grade depending on the class.

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub

Reddit