MoodleNet/Front-end dev workshop: Difference between revisions
From MoodleDocs
Doug Belshaw (talk | contribs) No edit summary |
Doug Belshaw (talk | contribs) |
||
| (13 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
---- | ---- | ||
[[File:kayleigh-rob.jpg|thumb]] | |||
[[File:sam-mayel.jpg|thumb]] | |||
[[File:notebook-and-post-its.jpg|thumb]] | |||
=== Introduction === | |||
Doug and Mayel from the MoodleNet team spent three days (Weds 19th to Fri 21st September 2018) with Kayleigh, Sam, and Rob from [https://outlandish.com Outlandish]. This was follow-up work to the [https://docs.moodle.org/dev/MoodleNet/Design_Sprint 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 | * 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 | * 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 [https://gitlab.com/moodlenet/clients/react/boards 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 | |||
* [https://gitlab.com/moodlenet/clients/react/issues/17 List the assumptions] we came into the workshop with and whether they're actually correct | |||
* [https://gitlab.com/moodlenet/clients/react/issues/6 Agree on the front-end toolkit] we're going to use and make decisions on components | |||
* Make some UI decisions, [https://gitlab.com/moodlenet/clients/react/issues/7 building on UX Milestones 1 and 2] | |||
* Decide on [https://gitlab.com/moodlenet/clients/react/issues/12 resource allocation] | |||
* Figure out what the 'containers' would look like from a [https://gitlab.com/moodlenet/clients/react/issues/16 basic design point of view] | |||
* Start thinking about [https://gitlab.com/moodlenet/clients/react/issues/14 pre-MVP user testing] | |||
* Develop a [https://gitlab.com/moodlenet/clients/react/issues/3 basic skeleton app in React] | |||
* Create a [https://gitlab.com/moodlenet/clients/react/issues/18 verb-based list of intentions] for MoodleNet users to help inform front-end development | |||
* Experiment with [https://gitlab.com/moodlenet/clients/react/issues/2 ReactXP and other options] to figure out if they're a good fit | |||
----- | |||
=== Next steps (draft) === | |||
==== Front-end dev milestone 1 ==== | |||
'''Completion date:''' Thursday 25th October (i.e. before [https://mozillafestival.org/ MozFest]) | |||
* Specify style guide as code | |||
* Implement client-side routing | |||
* Create theme system | |||
* Implement as many [https://gitlab.com/moodlenet/clients/react/issues/24 UI components and app screens] as possible in the time available | |||
==== Front-end dev milestone 2 ==== | |||
'''Completion date:''' Friday 23rd November (i.e. before Moodle Product Roadmaps week) | |||
* Implement remaining [https://gitlab.com/moodlenet/clients/react/issues/24 UI components and app screens] | |||
* Hook up front-end code with back-end (GraphQL and app logic) | |||
* Test sign-up process with users | |||
----- | |||
==== Front-end dev milestone 3 ==== | |||
'''Completion date:''' TBD | |||
* | * Finalise style guide | ||
* Implement any new MoodleNet branding guidelines (TBD) | |||
Latest revision as of 11:03, 25 September 2018
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
Completion date: Thursday 25th October (i.e. before MozFest)
- Specify style guide as code
- Implement client-side routing
- Create theme system
- Implement as many UI components and app screens as possible in the time available
Front-end dev milestone 2
Completion date: Friday 23rd November (i.e. before Moodle Product Roadmaps week)
- Implement remaining UI components and app screens
- Hook up front-end code with back-end (GraphQL and app logic)
- Test sign-up process with users
Front-end dev milestone 3
Completion date: TBD
- Finalise style guide
- Implement any new MoodleNet branding guidelines (TBD)
