This repo is for the workshop on "Building Modern Single-Page Web Applications" workshop at Frontend Masters, June 2015.
- Stuff to do before the workshop
- Copy/paste snippets
- Giving you tools, knowledge and confidence to build and deploy an application from scratch.
- Familiarizing you with basics of:
- ES6+
- Node.js/npm
- Ampersand.js
- React
- Webpack
- Isomorphic Rendering
- Providing user logins using an OAuth API
- Consuming an external JSON API
- Putting your app on the Internet
9:00 Start
- Short intro talk
- Project setup
- Discuss node, npm, hjs-webpack
- Render basic "hello" content with React
- Intro to React.js
- show build step
** frameworks talk/discussion **
- Adding styles
- show yeticss.com
- create styles folder in src
- import yeticss.com
- show what happens when you build now
- show live reloading in action
- Convert ES5 React module to ES6
- compare them side-by-side
10:30 - 11:00 morning break
- Install and use the router
- public and 'repos' routes
- start with console.log routes
- React.render inside method
- re-deploy
- Introduce ampersand-app pattern
- demo event signaling via app
- Add layout.js
- Local links/Internal Nav Component
12:30 - 1:45 Lunch Break
- Authing with GitHub
- Understanding Standard OAuth Flows
- Keeping a "secret" in a static clientside app
- Gatkeeper Microservice
- Persisting token, modeling 'me'
- Fetching "me" from github
- Binding username
3:15 - 3:45 Afternoon Break
- Rendering list of Repos
- Repo Detail Page
- Rendering The Labels
- Creating a Label component
- Adding Octicons
9:00 Start
- Editing Mode for Labels
- Deleting Labels
- Updating Labels
- Creating New Labels
10:30 - 11:00 morning break
- Configs and Deploys
- Deploying with Surge
- Adding A 404 Page
12:30 - 1:45 Lunch Break
- Static Isomorphic Rendering
- Using Standard for Code Style
3:15 - 3:45 Afternoon Break
- wrap up discussion
- open questions
- open hacking (see suggestions below)
I'd encourage you to keep hacking on this and finish whatever features we didn't build.
In addition, you may want to try adding the following:
- Add a link to real repo
- Add validation to form
- Add user avatar
- Switch it over to login with firebase
- Write module that fetches "all" repos (using github paging API)
- Add color picker?
- My Book, Human JavaScript
- Thinking in React
- Reusable React Components
- Standard Linter
- Setting up ESLint, React and ES6
- Complete HubTags.com Source
Honest feedback is golden. Please take a minute to say what you liked/what you didn't: http://j.mp/masters-feedback
If you liked it maybe even tweet about it :) I'm @HenrikJoreteg on twitter.
<3