We want to provide a similar look-n-feel to GitHub's frontend:
Each top-level resource (users, repositories, etc) has it components divided into tabs or menus. For example a repository has multiple components: Code, Issues, Settings, etc.
Each controller responsible for at least one component of a top-level resource requires to use a specific layout. For example, RepositoryController states following plug:
plug :put_layout, :repository_layout when action not in [:new, :create]
In this example, the :repository_layout is responsible for displaying the tab-bar and embedding the current controller views into the rightful tab.
In the same manner as top-level resources, a component can be divided into multiple sub-components. For example, a Code component provides views for browsing trees, list commits, branches, activities, ...
An important point here is that we want to keep specific state informations while navigating through a component's views. In the Code component, we want to keep the current revision through all related sub-components. For example:
1) User browses tree on branch "master".
2) User checks history on a specific blob (starting from current branch).
3) User clicks on last commit in history.
4) User continues browsing tree from given point in history.
CSS framework
Currently the frontend uses pre-installed Bootstrap 3 without any additional style. People seems to enjoy Bulma nowadays. Maybe we give it a try.
Its written in SASS, lightweight, modular and comes with a lot of components out-of-the-box.
Client-side rendering
Currently, we rely on React to render Javascript components. The react_component/3 function is available to all views and allow passing properties from server to client. Coupled with GraphQL and Relay, this approach allow to easily write dynamic client-side components.
At ElixirConf 2018, Chris McCord revealed a new project he is working on called Phoenix.LiveView. This looks very promising and would be a perfect match for form validation and similar client-side interactive components.
Layout structure
We want to provide a similar look-n-feel to GitHub's frontend:
Each top-level resource (users, repositories, etc) has it components divided into tabs or menus. For example a repository has multiple components: Code, Issues, Settings, etc.
Each controller responsible for at least one component of a top-level resource requires to use a specific layout. For example,
RepositoryControllerstates following plug:In this example, the
:repository_layoutis responsible for displaying the tab-bar and embedding the current controller views into the rightful tab.In the same manner as top-level resources, a component can be divided into multiple sub-components. For example, a Code component provides views for browsing trees, list commits, branches, activities, ...
An important point here is that we want to keep specific state informations while navigating through a component's views. In the Code component, we want to keep the current revision through all related sub-components. For example:
1) User browses tree on branch "master". 2) User checks history on a specific blob (starting from current branch). 3) User clicks on last commit in history. 4) User continues browsing tree from given point in history.
CSS framework
Currently the frontend uses pre-installed Bootstrap 3 without any additional style. People seems to enjoy Bulma nowadays. Maybe we give it a try.
Its written in SASS, lightweight, modular and comes with a lot of components out-of-the-box.
Client-side rendering
Currently, we rely on React to render Javascript components. The
react_component/3function is available to all views and allow passing properties from server to client. Coupled with GraphQL and Relay, this approach allow to easily write dynamic client-side components.At ElixirConf 2018, Chris McCord revealed a new project he is working on called
Phoenix.LiveView. This looks very promising and would be a perfect match for form validation and similar client-side interactive components.