MoodleNet/Front-end dev workshop
From MoodleDocs
Introduction
Doug and Mayel from the MoodleNet team spent three days (Weds 19th to Fri 21st September 2018) with Kayleigh, Sam, and Rob from Outlandish. This was follow-up work to the Design Sprint we did back in May 2018, and to UX Milestones 1 and 2.
What we aimed to achieve
We had an ambitious agenda for the workshop:
- Allow Sam, the front-end developer Outlandish have assigned to this project, to get up to speed with MoodleNet
- Help define and scope front-end deliverables
- Decide on the layout/look/feel of both the desktop and mobile web versions of MoodleNet
- Create a draft style guide (in code)
- Develop a basic app (skeleton repo in GitLab)
- Filed GitLab issues for (at least 1+ month of) post-workshop front-end development
- Agree on the toolkit (incl. libraries) we’re going to use
Outputs
There is a GitLab board to track issues from both this workshop and forthcoming front-end development work.
What we achieved
During the workshop itself, we managed to:
- Prioritise the above work, using a 'must', 'should', and 'could' approach
- List the assumptions we came into the workshop with and whether they're actually correct
- Agree on the front-end toolkit we're going to use and make decisions on components
- Make some UI decisions, building on UX Milestones 1 and 2
- Decide on resource allocation
- Figure out what the 'containers' would look like from a basic design point of view
- Start thinking about pre-MVP user testing
- Develop a basic skeleton app in React
- Create a verb-based list of intentions for MoodleNet users to help inform front-end development
- Experiment with ReactXP and other options to figure out if they're a good fit
Next steps (draft)
Front-end dev milestone 1 (before MozFest)
- Specify style guide as code
- Implement client-side routing
- Create theme system
- Implement some UI components and app screens (scope TBD)
Front-end dev milestone 2 (end of Nov - TBC)
- Implement more UI components and app screens (scope TBD)
- Hook up front-end code with back-end (GraphQL and app logic)
