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
#1 Frontend 前端分享 by Howard
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
jsTainan
April 12, 2016
Technology
1
200
#1 Frontend 前端分享 by Howard
jsTainan
April 12, 2016
Tweet
Share
More Decks by jsTainan
See All by jsTainan
jsTainan X Share - Modular Frontend by 鍾傑倫
jstainan
0
260
Other Decks in Technology
See All in Technology
コンテナセキュリティの最新事情 ~ 2026年版 ~
kyohmizu
7
2.5k
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
350
こんなところでも(地味に)活躍するImage Modeさんを知ってるかい?- Image Mode for OpenShift -
tsukaman
1
180
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
mikimatsumoto
0
270
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
kawaguti
PRO
1
230
コミュニティが変えるキャリアの地平線:コロナ禍新卒入社のエンジニアがAWSコミュニティで見つけた成長の羅針盤
kentosuzuki
0
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
15
93k
広告の効果検証を題材にした因果推論の精度検証について
zozotech
PRO
0
220
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
370
Amazon Bedrock Knowledge Basesチャンキング解説!
aoinoguchi
0
170
配列に見る bash と zsh の違い
kazzpapa3
3
170
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
yoshiki_0316
1
120
Featured
See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
750
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
190
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
We Are The Robots
honzajavorek
0
170
AI: The stuff that nobody shows you
jnunemaker
PRO
2
280
Test your architecture with Archunit
thirion
1
2.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
4 Signs Your Business is Dying
shpigford
187
22k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
230
KATA
mclloyd
PRO
34
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Context Engineering - Making Every Token Count
addyosmani
9
670
Transcript
JS @前端 2016/04/02 Howard
About me • Mentor at training program • Host at
好想工作室 • Web application training • Technical lead at HWTrek • Developer at Inpuman • Member at TMI
什麼是(網頁) 前端?
前端 三 劍客
1991 ~ 1999 HTML
2000 ~ 2006 HTML CSS Javascript
2007 ~ 2010 HTML CSS Javascript
2011 ~ HTML CSS Javascript
對前端工程師來說... Javascript 的程度決定薪水的高度 ps. 以上文字有效期限五年
不過還是要備註一下... 前端工程師不是只需要處理 Javascript ps. 詳細內容請參閱附錄一
None
None
Javascript 竄起因素 • Jquery 出世 (但這個是有後遺症的) • Browser 大戰 (終於可以脫離
IE 那個智障兒) • Application Web 化
前端 鑑古知今 傳送門...
到底 Javascript 可以做什麼
• 前端 Interaction • 特效 • ajax • Call API
• 自動化測試 • 瀏覽器外掛 • 渲染畫面 • 控制瀏覽器 • 讀取 cookie • WebGL • Game • 後端 service 開發 • API 建置 • 資料庫連接 • 桌面程式開發 • Mobile app 開發 • 硬體介接 • IOT • 爬蟲 • 自動化部屬
新手該從哪邊著手?
React X
在前端 framework、tool、library 蓬勃發展的年代 不能只靠 一招打天下
None
None
認識快、理解快、學習快、應用快
無招勝有招 沒有一定非要 xx 不可 只有當前情況下最適合的作法
求知若渴 知己知彼,時時保持好奇心 去了解各種 tool、framework、library 使用的時機
Jquery - Dom operation 互動多、特效多適宜
Angular - Rich application Object 互動多、CRUD多事宜
Ractive - Template-driven 渲染多、互動單純適用
React - One-way reactive data flow 畫面互動多、狀態多適宜
D3.js - Data-driven documents Data 視覺呈現適宜
講那麼多... 所以到底新手該從哪邊著手
HTML & CSS 是的 你沒看錯...科科 ps. 請參閱附錄二
Javascript 基礎名詞 • Asynchronous • Callback • Promise • Error
first • Object & Array • Function • Ajax • Closure
前端工程師基本不外乎三件事情 • Deal Interaction • Call API • Render HTML
以下開始(放) Live demo ps. 據說 live 會有高達 90% 卡住
Live demo 留言板 • Get comment tempate • Get comment
data from api • Use template engine render html • Register btn event • Rerender page
QA Time
工商時間
好想工作室 Roadmap • (Techincal) Co-working space • Web application training
campus ◦ Froentend developer ◦ Backend developer ◦ Architecher developer ◦ Joomla CMS • iOS application training campus • Browser extenstion training campus
附錄一 前端工程師
附錄一 前端工程師 • https://github.com/JacksonTian/fks • https://github.com/unruledboy/WebFrontEndStack
附錄二 前端學習順序建議 • https://li-xinyang.gitbooks.io/frontend- notebook/content/
附錄三 Reference • http://www.ractivejs.org/ • http://momentjs.com/docs/ • http://bootsnipp.com/snippets/nPdXz • https://github.com/AutumnsWind/Front-end-tutorial