How to Build a Single Page Web by Bootstrap, and Github, Google Docs, Parse.

Transcript

1. How to Build a Single Page Web by Bootstrap, Github,

   Google Docs, and Parse. Andre Lee

2. Outline • Single Page • Pros and Cons • Sketch

   • Github Pages • Google Docs • Demo

3. Outline • Single Page • Pros and Cons • Sketch

   • Github Pages • Google Docs • Demo

4. Single Page • Single-Page Application (SPA) or • Single-Page Interface

   (SPI) Client Side Routing Client Side Rendering SPA

5. Outline • Single Page • Pros and Cons • Sketch

   • Github Pages • Google Docs • Demo

6. Pros and Cons Pros • Reduce Rendering Duplicate Objects •

   Date & Time • Keep User’s State • Responsive

7. Pros and Cons (Cont’d) Cons • Need JavaScript to be

   Enabled • Search Engine Optimization • Browser History

8. Outline • Single Page • Pros and Cons • Sketch

   • Github Pages • Google Docs • Demo

9. Sketch • Bootstrap • Font Awesome • AngularJS

10. Outline • Single Page • Pros and Cons • Sketch

    • Github Pages • Google Docs • Demo

11. Github Pages Pros • Free • Custom Domain Name •

    Don’t worry about DDoS Cons • All Public

12. Github Pages

13. Github Pages (Cont’d) Demo • Github • git branch gh-pages

    • Domain Name

14. Outline • Single Page • Pros and Cons • Sketch

    • Github Pages • Google Docs • Demo

15. Google Docs Pros • Free Cons • Need to be

    Hacked • One Page Limitation

16. Outline • Single Page • Pros and Cons • Sketch

    • Github Pages • Google Docs • Demo • Single Page • Pros and Cons • Sketch • Github Pages • Google Docs • Parse • Demo

17. Parse • Free for getting started • Infra. APIs •

    Push Notifications • Analytics • All need to do is “Business Logic”

18. Parse (Cont’d) • Parse.com • JavaScript SDK • Backbone-style •

    CRUD

19. Outline • Single Page • Pros and Cons • Sketch

    • Github Pages • Google Docs • Parse • Demo

20. Code • http://lab.andretw.com/spa • https://gist.github. com/andretw/0253c8b43e21165c4cd3

21. Demo

22. Thank you