Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to Build a Single Page Web by Bootstrap, a...
Search
andre
July 07, 2014
Programming
2
550
How to Build a Single Page Web by Bootstrap, and Github, Google Docs, Parse.
Using Web Services to build a single page web for free in beginning phrase.
andre
July 07, 2014
Tweet
Share
More Decks by andre
See All by andre
Booking.com Hackathon Taipei 2017
andre
0
190
Auto I18N (Internationalization) Process
andre
0
67
Write Securer Code
andre
0
61
iPatrol
andre
0
57
Hello SDN
andre
0
120
koa introduction (Node.js Web Framework)
andre
3
370
RxJS (The Reactive Extensions for JavaScript ) Introduction
andre
4
360
JSDC 2014 Taiwan Lightning Talk: TBD
andre
0
120
From Facebook Graph API 1.0 to 2.1
andre
0
240
Other Decks in Programming
See All in Programming
GrafanaのHTTP API を眺めてみよう
rinchoku
0
420
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
160
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
130
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
140
フロントエンドの現在地とこれから
koba04
10
4.6k
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
810
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
580
C#および.NETに対する誤解をひも解く
ymd65536
0
320
知られざるNaNの世界
hole
2
790
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
120
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
880
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
1.1k
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Side Projects
sachag
452
42k
Building Your Own Lightsaber
phodgson
102
6k
Statistics for Hackers
jakevdp
796
220k
In The Pink: A Labor of Love
frogandcode
139
22k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
How to Think Like a Performance Engineer
csswizardry
17
1k
Transcript
How to Build a Single Page Web by Bootstrap, Github,
Google Docs, and Parse. Andre Lee
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Demo
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Demo
Single Page • Single-Page Application (SPA) or • Single-Page Interface
(SPI) Client Side Routing Client Side Rendering SPA
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Demo
Pros and Cons Pros • Reduce Rendering Duplicate Objects •
Date & Time • Keep User’s State • Responsive
Pros and Cons (Cont’d) Cons • Need JavaScript to be
Enabled • Search Engine Optimization • Browser History
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Demo
Sketch • Bootstrap • Font Awesome • AngularJS
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Demo
Github Pages Pros • Free • Custom Domain Name •
Don’t worry about DDoS Cons • All Public
Github Pages
Github Pages (Cont’d) Demo • Github • git branch gh-pages
• Domain Name
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Demo
Google Docs Pros • Free Cons • Need to be
Hacked • One Page Limitation
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Demo • Single Page • Pros and Cons • Sketch • Github Pages • Google Docs • Parse • Demo
Parse • Free for getting started • Infra. APIs •
Push Notifications • Analytics • All need to do is “Business Logic”
Parse (Cont’d) • Parse.com • JavaScript SDK • Backbone-style •
CRUD
Outline • Single Page • Pros and Cons • Sketch
• Github Pages • Google Docs • Parse • Demo
Code • http://lab.andretw.com/spa • https://gist.github. com/andretw/0253c8b43e21165c4cd3
Demo
Thank you