太阁x项目组Full-stack Web App

Transcription

太阁x项目组 Full-stack Web App
A real time chatting system
焗染烫老师
讲座按照国际惯例 :35 开始
想分享技术? 请找沈恬或小石头.
更多分享
关注微信 bit_tiger
今日表情包分享
我们的社区
技术博客
知识总结
讲座直播
太阁x
技术讨论群
群直播
太阁官网
Bittiger.io
和社区
太阁x
项目小组
MOOC班
太阁x地区
刷题小组
线下聚会
华人技术社区
- 全球4个国家, 16个地区
- 分享技术, 学习技术
- 生长学习法
欢迎关注
- 网站: BitTiger.io
- “论码农的自我修养”
- 微信
- 知乎
- 今日头条
- 等11个平台
讲师介绍
焗染烫
多伦多大学M.Eng. 目前在TD Bank从事前端开发。
王思唯
埃默里大学计算机系就读。目前在一家创业公司做后
端开发实习生
太阁X项目组 - Full-stack Web
App
A Real Time Chatting System
[焗染烫老师]
Ouline
●
●
●
●
●
●
Live Demo
Architecture Overview
Implementation
Environment and Deployment
Summary
Thank you and Q&A
Live Demo
Demo
Technologies Stack
●
●
●
Front-end
○ React.js
○ Redux
○ ES6
○ WebPack
Back-end
○ Node.js
○ Redis
○ MongoDB
Development Environment and Deployment
○ Docker
Architecture Overview
Pub/Sub & Cache msg
Session Store
Web Client
Chat msg
(Socket.io)
Reactjs + Redux
Authentication
Use Profile
Technologies and its usage - React.js
●
React.js (just view)
Component-based
■ Composable, Reusable,
Maintainable
Virtual DOM
■ Diff algorithm
One way data flow
■ Clear data flow, Easy debugging
Technologies and its usage - React.js
Message Component
Technologies and its usage - Redux
●
Redux
Predictable state container for js app
● Functional style
● Immutable state
Presentational and Container components
■ Presentational => How things look
■ Container => How things work
Redux Architecture
Reduce
r
Action
Container
Technologies and its usage - Webpack
●
WebPack
Module bundler
■ Js file, static asset, css, images
Hot reload
■ WebPack-dev-server
Code split
■ Extracting common module
■ Split code into on demand loaded chunk
● Multiple entry points
Technologies and its usage - Node.js
●
Node.js
Server side javascript runtime environment
■ Google v8 javascript engine
Event-driven Non-blocking I/O model
○ Good for I/O intensive application
■ Real-time communication
■ Browser games
○
Not good for CPU computational heavy
work
Technologies and its usage - Redix
●
Redis
In-memory data structure store
■ Database,Cache, message broker
Publish/Subscribe messaging system
Cache chat message
Technologies and its usage - Node.js && Redis
Message sending and receiving
Technologies and its usage - MongoDB
●
MongoDB
○ Document-oriented nosql database
■ Document ⇔ Row in RDBS
■ Collection ⇔ Table in RDBS
○ Rich querying capabilities
○ High performance
■ No complex join
■ Less disk read
○ Easy scalability
■ Sharding key
Technologies and its usage - MongoDB
Data stored in MongoDB
Development Environment and Deployment
●
Docker
○ Operating-system-level virtualization
■ Cgroups, namespaces on linux to allow container
○ Light weight container vs virtual machine
■ Fast, spin up and down in seconds
■ Run hundreds of container with performance impact
○ Why docker
■ Agility
● Freedom define environment
■ Control
● Easy manage standardized operating environment
■ Portability
● No matter private infrastructure to public cloud providers
Summary
Future improvement
Authentication
Session
Pub/Sub
Cache
Web Client
WebSocket
connection
Chat msg
Reactjs + Redux
HA
Cluster
Use Profile
Summary
lessons
●
Front-end
○ Stateless components and stateful container
○ Benefit of functional style
○ Javascript core technique
●
Back-end
○ Build server using javascript
■ Node.js with Socket.IO
○ Nosql
■ Redis, MongoDB
○ Docker
■ Easy build, ship and deploy
Summary
Resources
●
●
●
Source code - https://github.com/jiangxiaoyong/JChat
Redux
○ Example - https://github.com/reactjs/redux/tree/master/examples
○ Official doc - http://redux.js.org/docs/introduction/
○ Middleware - https://segmentfault.com/a/1190000004485808
Webpack
○ Tutorial https://github.com/petehunt/webpack-howto/blob/master/README-zh.
md
Before Q&A..
Lecturer: 焗染烫老师
Organizer: Jerry Yang, EK, 小石头
Editors: BoHua Tian, 桃子
Marketing: Yuanda Li, Tian Shen, 太阁x
Platforms: BitTiger.io, 太阁x社区
And YOU :-)
Q&A
更多分享
关注微信
bit_tiger
想分享
技术

太阁x项目组Full-stack Web App

Transcription

Similar documents