{"action":"created","issue":{"url":"https://api.github.com/repos/keystonejs/keystone/issues/503","labels_url":"https://api.github.com/repos/keystonejs/keystone/issues/503/labels{/name}","comments_url":"https://api.github.com/repos/keystonejs/keystone/issues/503/comments","events_url":"https://api.github.com/repos/keystonejs/keystone/issues/503/events","html_url":"https://github.com/keystonejs/keystone/issues/503","id":39104081,"number":503,"title":"Rewrite the Admin UI in React","user":{"login":"JedWatson","id":872310,"avatar_url":"https://avatars.githubusercontent.com/u/872310?v=3","gravatar_id":"","url":"https://api.github.com/users/JedWatson","html_url":"https://github.com/JedWatson","followers_url":"https://api.github.com/users/JedWatson/followers","following_url":"https://api.github.com/users/JedWatson/following{/other_user}","gists_url":"https://api.github.com/users/JedWatson/gists{/gist_id}","starred_url":"https://api.github.com/users/JedWatson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JedWatson/subscriptions","organizations_url":"https://api.github.com/users/JedWatson/orgs","repos_url":"https://api.github.com/users/JedWatson/repos","events_url":"https://api.github.com/users/JedWatson/events{/privacy}","received_events_url":"https://api.github.com/users/JedWatson/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/keystonejs/keystone/labels/(keystone)%20admin","name":"(keystone) admin","color":"064675"},{"url":"https://api.github.com/repos/keystonejs/keystone/labels/enhancement","name":"enhancement","color":"61a24c"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/keystonejs/keystone/milestones/5","html_url":"https://github.com/keystonejs/keystone/milestones/0.4.0","labels_url":"https://api.github.com/repos/keystonejs/keystone/milestones/5/labels","id":917933,"number":5,"title":"0.4.0","description":"","creator":{"login":"morenoh149","id":587438,"avatar_url":"https://avatars.githubusercontent.com/u/587438?v=3","gravatar_id":"","url":"https://api.github.com/users/morenoh149","html_url":"https://github.com/morenoh149","followers_url":"https://api.github.com/users/morenoh149/followers","following_url":"https://api.github.com/users/morenoh149/following{/other_user}","gists_url":"https://api.github.com/users/morenoh149/gists{/gist_id}","starred_url":"https://api.github.com/users/morenoh149/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/morenoh149/subscriptions","organizations_url":"https://api.github.com/users/morenoh149/orgs","repos_url":"https://api.github.com/users/morenoh149/repos","events_url":"https://api.github.com/users/morenoh149/events{/privacy}","received_events_url":"https://api.github.com/users/morenoh149/received_events","type":"User","site_admin":false},"open_issues":14,"closed_issues":1,"state":"open","created_at":"2014-12-30T20:01:34Z","updated_at":"2015-06-18T11:56:25Z","due_on":null,"closed_at":null},"comments":62,"created_at":"2014-07-30T15:27:42Z","updated_at":"2015-07-16T14:55:58Z","closed_at":null,"body":"### Some Background\r\n\r\nThe KeystoneJS Admin UI was originally built as a 'simple' web app, based on old-school form generation, submission and rendering techniques combined with jQuery for client-side UI enhancements.\r\n\r\nThis decision has helped us develop reusable processing techniques that are easily applied to server-driven projects (from contact form processing on websites to complete applications and APIs).\r\n\r\nIt's also been limiting though, and ultimately we want the Admin UI to be a rich client-side app. Now that the server side patterns are mature, it's time to focus on that.\r\n\r\nBecause we've known for a while that the Admin UI will be rewritten, this has unfortunately blocked several enhancements we've been keen to build, and which have often been requested by our community, including a plugin architecture, custom field types, and richer Admin UI functionality.\r\n\r\nPrimarily, the block has been that if we open it up to customisation then change the whole architecture, it'll create a backwards compatibility nightmare for anyone who's invested in the old system. So this is now the next big thing, that will lead to other big things, and I'm really excited to be digging into it.\r\n\r\n### Why React?\r\n\r\nI've spent a long time trying to decide the best fit for Keystone's Admin UI, and have assessed a lot of frameworks including Angular, Ember, Polymer, Backbone and more before settling on React.\r\n\r\nPolymer was the favourite for a long time - because web components are the future, and play a very important role in our long term plans for Keystone - but unfortunately it's just not mature enough.\r\n\r\nReact, on the other hand, has excellent support, a robust routing solution, is very fast, and does a great job of providing many of the benefits web components will bring, today.\r\n\r\nIt also plays very nicely with Browserify, which combined with a grunt workflow, provides a great development environment, and makes sense for the way we expect to implement custom field types and extensions.\r\n\r\n### The Plan\r\n\r\nWe don't expect this to be a massive, disruptive rebuild - it doesn't need to be. The first step will be to selectively replace server-generated code with React components that still behave the way the current Admin UI does, with a form-submission / processing / rendering workflow.\r\n\r\nOnce that is done, many of the blocks around allowing extensible field types and Admin UI customisation will be removed.\r\n\r\nThe next step will be to transition fully to a react app that will run client-side against API endpoints. In the same way we made the `UpdateHandler` and other tools work in a way that dramatically improves productivity when developing server-side processing workflows, we'll use this transition to develop great client-side app workflows that are reusable in projects. Very little will be specific to the Admin UI itself.\r\n\r\nFor the field types (and forms, and list UI) our intention is to develop reusable components that can be dropped into Keystone projects and reused outside of the Admin UI, providing rich functionality regardless of whether the server or client is doing the processing.\r\n\r\nSome things will certainly need a rich client interface, but server-side HTML generation and processing is still important on the web, and hopefully we can create a solution that facilitates the holy grail of sharing code between the client and the server without being locked into either.\r\n\r\n### Can you help?\r\n\r\nThere is still a lot to be worked out around the best way to manage application state, extensibility and component structure. There will also be quite a bit of work involved in transitioning all the current UI elements to React components.\r\n\r\nIf you have experience working with React and would be happy to help, please let us know!"},"comment":{"url":"https://api.github.com/repos/keystonejs/keystone/issues/comments/121980616","html_url":"https://github.com/keystonejs/keystone/issues/503#issuecomment-121980616","issue_url":"https://api.github.com/repos/keystonejs/keystone/issues/503","id":121980616,"user":{"login":"BerkeleyTrue","id":6775919,"avatar_url":"https://avatars.githubusercontent.com/u/6775919?v=3","gravatar_id":"","url":"https://api.github.com/users/BerkeleyTrue","html_url":"https://github.com/BerkeleyTrue","followers_url":"https://api.github.com/users/BerkeleyTrue/followers","following_url":"https://api.github.com/users/BerkeleyTrue/following{/other_user}","gists_url":"https://api.github.com/users/BerkeleyTrue/gists{/gist_id}","starred_url":"https://api.github.com/users/BerkeleyTrue/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BerkeleyTrue/subscriptions","organizations_url":"https://api.github.com/users/BerkeleyTrue/orgs","repos_url":"https://api.github.com/users/BerkeleyTrue/repos","events_url":"https://api.github.com/users/BerkeleyTrue/events{/privacy}","received_events_url":"https://api.github.com/users/BerkeleyTrue/received_events","type":"User","site_admin":false},"created_at":"2015-07-16T14:55:58Z","updated_at":"2015-07-16T14:55:58Z","body":"The admin panel is the CMS you can't have a CMS without it. If you remove it then keystone just becomes mongoose..."}}