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
Web技術の現状と感情
Search
rxon
July 16, 2017
Programming
2
1.1k
Web技術の現状と感情
原稿付き記事:
https://rxon.now.sh/webKanjyo.md
rxon
July 16, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
37
17k
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Semantic search with Django and pgvector
pauloxnet
0
220
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
220
"config" ってなんだ? / What is "config"?
okashoi
0
210
object-oriented-conference-2024
fuwasegu
8
2.6k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1k
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
Why 1 + 1 = 2 in Swift?
1plus4
1
600
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
260
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
26
1.8k
Mobile First: as difficult as doing things right
swwweet
215
8.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
353
18k
Designing with Data
zakiwarfel
95
4.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.5k
Code Review Best Practice
trishagee
54
15k
Bash Introduction
62gerente
604
210k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Rails Girls Zürich Keynote
gr2m
91
13k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
Webٕज़ͷ ݱঢ়ͱײ by rxon
rxon ݝཱ͓͖ͩΕ͍͖Ε͍େֶηΫγʔϓϩάϥϛϯάֶՊҰճੜ ϑϩϯτΤϯυμΠλΠϫΧϧ όοΫΤϯυϋφϯτφΫ
Webٕज़ Web ϞόΠϧ σεΫτοϓ etc… React Native, Ionic Electron(Chromium and
Node.js) ↘︎ addon→C++
Web WebαΠτ ී௨ͷwebϖʔδ WebΞϓϦέʔγϣϯ WebϓϥοτϑΥʔϜ্ͷΫϥΠΞϯταΠυ ΞϓϦέʔγϣϯ
WebΞϓϦέʔγϣϯ ϑϩϯτΤϯυ ΫϥΠΞϯταΠυ όοΫΤϯυ αʔόʔαΠυ Node.js(V8+͍Ζ͍Ζ) WAF: express, koa
ݱঢ়
Single Page Application 1ϖʔδ্ʹؾ߹ͰΫϥΠΞϯταΠυΞϓϦ έʔγϣϯΛߏங͢Δ ঢ়ଶભҠͷཧ JSONͷऔಘ ͦͷଞϒϥβͷॾػೳΛ࠶࣮
SPAͷ࡞Γํ React.jsͰcomponentsΛͱΓ͍͋͑ͣͬͺ͍࡞Γɺ ReduxͰঢ়ଶΛཧɺΠϕϯτʹdispatchΛ༩͢ ΔɻσʔλऔಘʹaxiosΛ͍ɺϧʔςΟϯάʹ react-routerɻॾʑͰ͖ͨΒbabelͰJSͷτϥϯεύ ΠϧPostCSSΛ͠ͳ͕ΒWebpackͰґଘղܾͯ͠ bundle.jsΛग़ྗɻόοΫΤϯυʹREST JSON API Λ༻ҙ͠ɺServer-Side
Renderingߦ͏ɻ
ײ
None
None
None
minimalist
ϛχϚϜͳߏͰ ͳΜ͔࡞Γ͍ͨ
ͦ͏͍ٕज़ϒϩά WordPressɹϑΝΠϧଟ͗͌͢ TumblrɹCLI͔Β͑ͳ͍ ੩తαΠτδΣωϨʔλʔɹຖճbuild͕ඞཁ
ཁ݅ ฤूlocal md(textlint͏ͨΊ deployͷone commendͰߋ৽ ͱʹ͔͘ϛχϚϜʹ
files = await fs.readdir(dir) github.com/zeit/serve
rxon/note-2017 ಡΉਓͱॻ͘ਓʹ࠷ߴͷUXΛ༩͑ΔͨΊͷ front-end͚ͩͰͳ͘back-endɺ։ൃڥͱʹ ઈϛχϚϜͳٕज़ϒϩά ϑϩϯτΤϯυɹmustache:163ߦ(CSS:68ߦ) όοΫΤϯυɹNode.js:133ߦ typobrowserʹґଘ
Έ [ 'crossPlatformYu.md', 'minCMS.md', 'semicolon.md', 'webpackSmallArt.md' ] fs.readdir(); [{ title:
'ੈք࠷খͷCMS', description: 'ϛχϚϜ date: '2017-03-09', url: 'minCMS.md', html: null }, { title: 'ᕟΰγοΫΛҰॠ description: '͜Εε md͔Βਖ਼نදݱͰ ϝλσʔλΛऔΓग़͢ هࣄϖʔδ͜ΕʹhtmlΛ͚ͭΔ
None
None
৽نੑ ଟ
ੈք࠷খͷ CMS(ଟ)(ٛ) ଟ
None
ͦ͏ݴͬͯ
“ΞϓϦέʔγϣϯ”Λ ࡞Δͱ͖SPAʹ͍ͨ͠
ଥڠɺબఆɺɻ mithrilɹAPI13ݸ(< 8kb gzip) ɺҰ௨ΓೖͬͯΔ koaɹsubstack wayɺࣗ༝ͳදݱɺtjͷਪ͠ + JWT auth
without password
JSON Web Token auth without password 1. email form 2.
/auth?email=${email}&token=${token} Λฦ৴ 3. tokenΛcookieʹೖΕɺ͜ΕΛجʹೝূͯ͠ϦΫ Τετ ख͕ΊͬͪΌগͳ͍
࠷ޙʹ
ϑϩϯτΤϯυͷָ͠Έํ
Web։ൃͷָ͠Έํ ंྠ͍͍ײ͡ͷlibraryͰαΫοͱย͚ɺ ѹతൃྗͰ৽نੑΛੜΈग़͠ɺͦ͜ʹूத͢Δɻ
ऴ