Katselmointi

[Jakousa]

Katselmointi

Sivuston käytettävyys

Mitä tein

• 2.5.2019 klo ~12

• Käytin sovellusta kirjautumatta

  • Klikkailin firebassa olevaa sovellusta ja tarkastelin sivuja

• Käytin sovellusta kirjauduttuani

  • Pyrin muokkaamaan sivustoa.

Kokemus

• Ensisilmäyksellä sivu näyttää erinomaiselta.
• Pidän erityisesti vaihtuvasta kuvasta otsikossa, galleriasta ja tekstinmuokkauksesta.
• Gallerian kuvien muokkaus näyttää hyvältä.
• Sivujen muokkas jälkikäteen ei taida olla valmis. En löytänyt painiketta tallentaa muutoksia..?
• Päivitä sisältö -painike vie minut sivun alkuun sisältölistauksessa
• Käytettävyys selkeää.

Koodi

• Selkeästi nimetyt tiedostot. 👍

• Suosittelen käyttämään eslintiä. 😍

• Avasin https://github.com/ko-osakunta/osakunta/blob/master/src/components/editor/EditorClass.js tiedoston ja huomasin että sisällä on ikään kuin kaksi komponenttia. Kannattaa jakaa editorDiv omaksi komponentiksi. Single Responsibility Principle 💻

• App.js lataa aika paljon dataa. Se, että tietoja tarvitsevat komponentit (esim banner) lataisivat oman tietonsa ei vaikuta toimivuuteen juurikaan, mutta ylläpidettävyyteen varmasti. SRP ⭐

• Importeissa kannattaa pitää tietty järjestys, ensin npm moduulit, sen jälkeen omat

  • esim nyt App.js tiedostossa on näin:

import React, { useState, useEffect } from "react"
import Banner from "./components/structure/Banner"
import SideNav from "./components/structure/SideNav"
import Footer from "./components/structure/Footer"
import { Route, Switch, withRouter } from 'react-router-dom'
import { fetchPages, fetchContact, fetchUser, fetchImages, fetchBanners, fetchAnnouncements } from "./actions"
import { connect } from "react-redux"
import PageNotFound from "./components/pagetypes/PageNotFound"

kun kannattaa suosia tämmöistä järjestystä

import React, { useState, useEffect } from "react"
import { connect } from "react-redux"
import { Route, Switch, withRouter } from 'react-router-dom'
import { fetchPages, fetchContact, fetchUser, fetchImages, fetchBanners, fetchAnnouncements } from "./actions"

import Banner from "./components/structure/Banner"
import SideNav from "./components/structure/SideNav"
import Footer from "./components/structure/Footer"
import PageNotFound from "./components/pagetypes/PageNotFound"

• Eslint olisi mahdollisesti huomannut "ongelman". ⭐ Itse suosittelen airbnb defaultteja pienillä muutoksilla.

• Voisimme poistaa luokkakomponentit kokonaan nyt kun hookit on tarjolla.

• Bootstrapin käyttöön suosittelisin kirjastoa https://react-bootstrap.github.io/ kuten olitkin jo asentanut. Se ei estä oman css lisäämistä koodiin mutta antaa helpon "react" tavan käyttää bootstrap toiminnallisuuksia.

Kokonaisuus

Kehitysideana olisi käännöskirjaston mukaanottaminen, esimerkiksi yahoon react-intl on helppokäyttöinen https://github.com/yahoo/react-intl. Asiakkaasi mahdollisesti haluavat kuitenkin myös englanninkielisen toteutuksen. Resurssien kaksikielisyys vaatiikin kokonaan uusia ratkaisuja 😄

Olisi hyvä jos vielä vietät hetken hioessa ulkonäköä myös admineille, helpompi myydä tuote kun näyttää myös "coder graphics" kohtuulliselta. Samaan hiomiseen vielä ottaisin tuon eslintin tarkistamaan myös koodista tyylivirheitä.

Muokkausta toivottavasti korjaat pian. Muuten mitään moitittavaa ei ole. Mielenkiintoinen idea ja todella lupaava toteutus. Tästä on hyvä jatkaa.

💰 / 🕴