Labster 2.0🔬

Antonija Šimić, Front End Developer

Feel free to ask questions at any time

Why virtual labs

  • better learning outcomes
  • easy to repeat an exercise
  • easy to go back in the exercise steps
  • safe environment
  • can be accessed from anywhere anytime
  • no commuting
  • more people can do the same exercise at once

I was impressed by

  • how simple the instructions were (I got some questions right!)
  • easy to follow
  • users' diversity
  • variety of topics covered in labs

 

But what can be improved? 🤔

What can be improved

  • loading time
    • cache files, use service workers
    • make audio optional
    • more steps in loading, not all at once
    • option to load minimalist interface (if someone has bad connection), different UI based on the speed of network

What can be improved

  • loading time
    • minimise/compress all files
    • remove unused css
    • remove unused JS
    • too many elements injected at once into the DOM
    • prevent multiple loading for the same user, one user, one tab

Large files are loaded

Demo

What can be improved

  • user interface of the loading component
    • the best design is the one that does not need an explanation

What can be improved

  • user interface of the loading component
    • entertain user while the stimulation is being loaded => interesting/inspirational facts about science => similar to Slack

Performance result by the Lighthouse

  • Set an explicit width and height on image elements to reduce layout shifts
  • Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads
  • Serve static assets with an efficient cache policy
  • Avoid large layout shifts
  • Avoid enormous network payloads
  • ... more in the report

Accessibility issues reported by the Lighthouse

  • Buttons do not have accessible name
  • iframe does not have title attribute
  • Contrast in colors
  • Heading elements are not in sequence, from h1 to h6 (levels should not be skipped)
  • ... more in the report

Given a wireframe prototype, where/how would you start developing Labster Direct 2.0?

👩‍💻

Given a wireframe prototype, where/how would you start developing Labster Direct 2.0?

  • I would talk to the product owner and/or project manager
  • I would discuss UI with designers
  • I would talk to other developers about the architecture => sketch it, document it, draw it, discuss it, consult
  • I would prepare the jira/trello tasks
  • I would prepare the build tool
  • I would start with the simplest component

Given a wireframe prototype, where/how would you start developing Labster Direct 2.0?

  • I would study the legacy code and try to see if there are some mistakes that can be avoided and if there are good solutions that can be followed
  • I would research about the best practices in Vue community
  • develop MVP first, adjust product to the market and users' => lean development

Which FE technologies would I use

  • Vue.js/React + unity 3d
  • Vuex for state management or custom global store
  • vue-styled-components or good old scss
  • jest unit and integration tests

Development process

  • Meeting with a team regularly, everyone should contribute with ideas
  • List with new features, prioritise features 
  • Agreement on the architecture
    • how is BE going to communicate with FE
    • how are FE components communicating with each other
    • state management in FE
    • agreement on system design (DDD for example) 
    • light FE (hide processes from the end user)
  • Development methodology
    • scrum vs kanaban (I like scrum more)
    • jira vs trello

Development process

  • Agreement on deadlines: prioritise
  • Agreement on technologies
    • JS framework (Vue)
    • game engine
    • CSS approach (BEM vs Smacss, mobile vs desktop approach)
    • HTML architecture
  • Documentation:
    • clean
    • up-to-date
  • build tool
    • agree on the tool (webpack, gulp, parcel)
    • optimise, minimise, clean-up (postCSS)

Development process

  • Setup development standards
    • Git flow,
      • feature branches
      • master branch => production branch
      • develop branch => main branch for development
      • code reviews
    • prettiers, linters
    • tdd vs bdd
    • automated tests ran on git push
      • unit tests, integration tests
      • what should be covered
    • continuous integration

Team roles I would collaborate with

  • Designers
    • develop pixel perfect layout from delivered designs
    • agree on components' interface, like a react's storybook
    • minimalistic, simple
  • Back end developers 
    • well written documentation
    • well defined api points
    • clear division between BE and FE, what is handled by FE or BE

Team roles I would collaborate with

 

  • Other front end developers
    • discuss architecture
    • write down standards and solutions
    • well and simply written documentation
  • Product developer
    • make sure we are meeting users' needs
  • Project manager
    • make sure we are respecting the deadlines

Missing features 🔍

Missing features

  • remember me on login and signup (local storage?)
  • keyboard support for arrow keys
  • support for touchpad

Known bugs 🐞

Known bugs

Known bugs

Questions?

Thank you 🙌