Ionic Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom

Ionic 3 Skeleton Screen – stvaranje dojma brzine

Jedan od detalja koji je jako bitan kod mobilnih aplikacija je brzina ili barem dojam brzine. Brzina se može postići tehničkim poboljšanjima u samom kodu koristeći npr. Lazy Loading, ali opet ostaje onaj dio na koji kao developer ne mogu direktno utjecati, a to je brzina kojom će mi server poslati podatke koje trebam prikazati na ekranu mobilnog uređaja.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. – Mobile Design Details: Avoid The Spinner

Dok se podaci učitavaju korisnik je prisiljen čekati a ja kao developer trebam odlučiti kako pristupiti tom čekanju na način da korisniku zadržim pažnju, da mu dam do znanja da se u pozadini ipak nešto događa.

Tri su glavna pristupa:

– prikazati prazan ekran
– prikazati loader animaciju
– prikazati skeleton screen

Ionic 3 Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom
Izvor: A Bone to Pick with Skeleton Screens

Izrada Skeleton Screena

Definiram varijablu popisKorisnika koja će sadržavati popis korisnika koji dohvatim s API-ja https://jsonplaceholder.typicode.com/users, ali dok podaci ne stignu koristiti ću varijablu privremeniPopisKorisnika koja je zapravo niz (array) od šest stavki.

setTimeout će mi simulirati zastoj na mreži i podatke ću u ovom slučaju čekati tri sekunde za vrijeme kojih će biti prikazan skeleton screen.

Izgled ekrana sastoji se od najobičnijeg popisa korisnika i funkcionalnosti iza koje stoji *ngIf.

I za kraj tu je malo CSS-a.

Na kraju to izgleda ovako:

Ionic 3 Skeleton Screen – stvara dojam brzine

Zaključak

Skeleton screen je odličan način za stvaranje dojma brzine. U kombinaciji s ostalim tehničkim poboljšanjima performansi mobilne aplikacije može napraviti čuda, a sve u svrhu boljeg korisničkog iskustva.

Struktura aplikacije prema package.json

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, ExpressJS, Ionic Framework

2 misli o “Ionic 3 Skeleton Screen – stvaranje dojma brzine”

  1. how could i give a dynamically a array in this code —
    ( privremeniPopisKorisnika: Array = new Array(6);)

    ——————————————————————————————————-
    export class HomePage {

    popisKorisnika: any;
    privremeniPopisKorisnika: Array = new Array(6);

    constructor(public navCtrl: NavController) {}

    ionViewDidLoad() {
    setTimeout(() => {
    fetch(‘https://jsonplaceholder.typicode.com/users’)
    .then(response => response.json())
    .then(data => {
    //console.log(data);
    this.popisKorisnika = data;
    });
    }, 3000);
    }

    1. Instead of number 6 you could count how many rows you can display on screen and then pass it to “privremeniPopisKorisnika”.

      Second option is to use CSS Grid to fill whole screen of device.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *