Web Browser：在web browser 端跑就叫前端 front-end(HTML5,CSS,JS,JQ)
Server Application：在server application 之後的叫後端 back-end
Static Content Layer ：靜態的頁面，內容固定，不會變
Web Presentation Layer：動態頁面，內容即時，隨時會變化，向service layer提出要求
Service Layer：會有個 protocol ，對動態頁面說明他有哪一些規範可以follow
Logic Layer：接收 service layer 的要求，來進行轉換格式，如service layer pass過來說，我要一雙 Nike US9，藍色，logic layer會進行轉換格式，因為資料庫存檔，可能不是存藍色這檔案名稱或格式。如APi也會在這。
Data Access Layer
之後就是database 的資料
以下是各個名詞解釋
Static Content Layer – A layer serving static HTTP content. If you have high static load this layer will more likely be placed into a separate tier.
Web Presentation Layer – A layer serving the web-site (dynamic HTTP content) and as an interface to the business logic of the application.
Service Layer – A layer providing services to the web presentation layer and executing business logic implemented by the Logic Layer.
Logic Layer – A layer implementing business logic with the help of business rules. The Logic Layer accesses the Data Layer via the Data Access Layer.
Data Access Layer – The primary purpose of the Data Access Layer is to transform Logic Layer business objects into Data Access Layer POJOs and vice versa as well as providing access to the Data Layer via Data Access Objects and – in this case – Hibernate.
Data Layer – The Data Layer stores the application’s data in the database schema and is accessed via a JDBC interface provided by the Database Tier.
Real world app/web system architecture
" load balancer " 分流server，base on 人數數量去分server的流量，以免網站癱瘓。
" instance " is a virtual server ，好處： copy server , 0 set-up time
Story -> User case -> Marketing research -> Feature list -> SWOT analysis -> Sketching idea -> Storyboard -> Wireframe -> build up prototype via invision -> system architecture
feedback :
可加入比價錢功能，可利用網頁先存好商品 ex: Xmark , Evernote 釘在 Chrome website上面，目前的wishlist裡已有推播的功能(打折會通知你)，之後再implement to your app，最後可做在web or iPad 上增強用戶體驗，google product feed .
