Designing a website which optimises user experience is a key consideration for consumer engagement and retention. Today, an increasing number of people are accessing the web through their mobile devices, so building a mobile web experience which is fast, reliable, and engaging is paramount for businesses. While many established companies and start-ups alike use native apps in addition to, or instead of, a website, Progressive Web Apps (PWAs) offer a mobile and desktop web experience that has faster loading times, uses less data, works in any network state, and engages users by immersing them in the experience. Below, Dean Hume, Chief Technology Officer of UK property tech startup, Settled, explains how PWAs can deliver strong efficiencies for businesses.
What Are PWAs?
PWAs are a set of features that leverage new, open web application programming interfaces (APIs) to offer a mobile web experience that loads fast, uses less data, and re-engages with users in multiple ways. Mobile network coverage in the UK is pretty good, but even 4G can be flaky at the best of times. PWAs allow consumers to access a web app whilst offline and also enable them to see features on the go.
Some time ago, an article called Creating My First Web App with Angular 2 in Eclipse was published. Since then, Angular was upgraded and became Angular 4, and new tooling for it in Webclipse appeared. Let’s see how to create a simple application using Angular 4 and new Angular tooling looks.
Angular IDE or Webclipse —We’ll do our development using this Eclipse-based IDE. If you want to go without it – please, refer to the previous article.
Node.js, NPM, Angular CLI—These are the core tools for Angular development. They would be installed automatically by the IDE.
Basic knowledge of TypeScript, HTML, and Eclipse.
Creating a New Angular Project
Switch to Angular perspective using the button at the top-right corner of your IDE.
If you have ever tried to implement a similar self-contained UI in one of your projects you may have found it quite difficult to set up. The development workflow can also be a bit of a pain. You may have had to make trade-offs on development features like editing your HTML and seeing it refresh without having to recompile the app.
What do you do when you need a widget-like functionality? At present, there is a whole generation of developers who, as a rule, are googling for ready-made jQuery plugins. Can’t we do better than that? With the advances of web-components, we are expected to compose UIs from these building blocks. They are many. One can find one for almost any task. They are highly customizable. One can reuse the functionality, but with your own original representation. They are isolated. One doesn’t need to worry about the collisions in the compound system. But in reality, the APIs required by true web-components still have poor support in user-agents. One has to load an emulator library like Polymer. When it comes to component-based frameworks, one can painlessly import a component or rather go with a set like Material UI. But what would you say about standardized, library/framework-agnostic solution with not dependencies? Interesting that with HTML 5.1 and HTML 5.2 we get a number of new functional elements, solving classic developer tasks such as dialog, expandables, date pickers, and others. At the time of writing this article, the support for spec among browsers isn’t that good, but the elements can be polyfilled where it lacks. Let’s see what’s available and how we can use it.
Expandables With Summary/Details
A pair of elements, details and summary, were introduced in HTML 5.1 and are now widely supported. They implement a disclosure widget that can be adopted for collapse, dropdown menus, tree navigation, and other tasks. By default, any child elements of details except summary are hidden. As one clicks summary, the properties of open details change to true and the hidden content comes into view. To put it in practice, we made the following HTML:
Angular (formerly called Angular 2.0) is quickly becoming one of the most powerful ways to build a modern single-page app. A core strength is Angular’s focus on building reusable components, which help you decouple the various concerns in your application. Take authentication, for example. It can be painful to build, but once you wrap it in a component, the authentication logic can be reused throughout your application.
The Angular CLI makes it easy to scaffold new components and even entire projects. If you haven’t used the Angular CLI to quickly generate Angular code, you’re in for a treat!
Elm is a fun language for writing front-end programs. In this post, we will share how we solved the problem of implementing a filterable drop-down menu with it!
At PhraseApp, we came to the conclusion that we wanted to change something about our front-end stack. After evaluating several different frameworks, we decided that we would try out elm.
Welcome back! If you missed Part 1, check it out here!
Adding Authentication to Your EmberJS 2 App
The majority of the apps we use on a daily basis have a means of authenticating users. I’ll show you how to easily add authentication to our EmberJS 2 application. We’ll use Auth0 as our authentication service.
With all the existing frameworks and libraries, the web frontend development tech stack is extremely rich and multifaceted. For a business owner willing to take his business online, choosing suitable tools might be a tough call. Yet, it still remains a crucial aspect for the future success of a product.
Choosing a tried and true tool, such as Angular, might seem like a good idea. But there are more options to consider if you are building a specific type of product. React, one of the fastest-growing and most popular frontend libraries has been steadily gaining traction among developers, as well as business owners. Due to a number of its benefits, it might soon become the go-to web development tool.
EmberJS was developed by Yehuda Katz. It was initially released in December 2011. EmberJS was also formerly known as SproutCore MVC framework. New applications now run on EmberJS 2 which was released in August 2015. EmberJS 2.0 introduced new APIs and removed deprecated ones from Ember 1. The goal of Ember 2 is to remove badly designed and unnecessarily complicated code from Ember 1. And apps that run on Ember 1.13 without any deprecation warnings should run without issues on Ember 2.0. Currently, many popular products use EmberJS to build their user interfaces. Such platforms include LinkedIn, Yahoo, Zendesk, Square, PlayStation Now, Apple Music, Heroku Dashboard, Twitch, Discourse, IndieHackers and more. There is a comprehensive list of projects using Emberjs on builtwithember.io. EmberJS documentation is very detailed, and there is a vibrant community of users.
Understanding Core Concepts in EmberJS
If you have experience with frameworks like VueJS, Angular, and React, then you’ll understand how EmberJS works in a split second. Developers coming from the jQuery world might find it difficult to comprehend at first glance. But if you are familiar with frameworks like Laravel and Rails, then you’ll discover a pattern that’ll make fall in love with EmberJS.
Both Google and Bing maps are incredibly useful tools. The APIs they have opened to developers offer an amazing ability to add value to the solutions we provide. We don’t have to use ALL OF THE THINGS, sometimes just a snippet here and there can make a big difference to our users. This article shows how I used some of the Google Map APIs to help office staff work out how to best route mobile staff during their working day.
When you have a team of staff on the road, working from cars and vans, they generally fit into one of two categories. Those that are heavily pre-planned (say commercial transport delivery vehicles), and those that have an aspect of planning but need to adjust during the day as needs change. It’s this last one we are interested in for this article. Take for example plumbers – sure, they have planned jobs during the day, however, in a big city and a busy service company, there may be multiple emergencies, burst pipes, water leaks, etc., during the day that need to be prioritized and transport routes carefully, but quickly planned out. One of the methods used to decide where to send personnel is a triage system that asks three questions: