2017年5月25日星期四

Docker上手指南

 Whats is Docker?
Docker is an open-source project that automates the deployment of applications inside software containers. It is promoted by the company Docker, Inc.

Docker provides an additional layer of abstraction and automation of operating-system-level virtualization on Windows and Linux.Docker uses the resource isolation features of the Linux kernel such as cgroups and kernel namespaces, and a union-capable file system such as OverlayFS and others to allow independent "containers" to run within a single Linux instance, avoiding the overhead of starting and maintaining virtual machines.

1. Docker Cheatsheet
https://github.com/wsargent/docker-cheat-sheet

2. Docker Crash Course
https://github.com/oren/docker-crash-course

3. Docker in a Nutshell
https://www.slideshare.net/Flux7Labs/docker-in-a-nutshell-docker-austin-july-meetup

2017年5月10日星期三

jQuery 跟 AngularJS 的糾葛

AngularJS 有些人覺得難學理由之一,是因為它跟大多數網站所使用的 jQuery 設計思維差很多。
而且 AngularJS 又有內建 jqLite (jQuery 的精簡版),
造成一開始用 AngularJS 設計網站的時候會被 jQuery 的想法牽著走,然後又覺得被 AngularJS 的框架束縛住。
就會覺得 AngularJS 很複雜。

我對 jQuery 跟 AngularJS 整理出的一些想法
1. jQuery vs AngularJS
jQuery 是操作畫面 DOM 的工具函式庫;AngularJS 是軟體框架。
jQuery 的思維來說,開發一個網站的步驟是
  1. 拿到設計稿
  2. 切割畫面成一個一個 components
  3. jQuery time! 找尋 DOM element, 使用 jQuery 繫結 element 的事件。 (操作 DOM)
  4. 把全部的 components 的動作寫完 -> 完成網站!!
AngularJS 思維是
  1. 拿到設計稿
  2. Angular time! 開始構想架構。(從 application 的思維開始想, 思考此 app 需要什麼事件、 DOM 或 functions)
  3. 撰寫 JavaScript ,把需要的資源 (model or functions) 準備好。
  4. 撰寫 HTML template,把對應的資源綁在 DOM 上面. (ng-model, ng-click, etc)
讓畫面上的邏輯都找到對應的資料 -> 完成網站!!jQuery:
pros: HTML 精簡,不會把邏輯放在 HTML 上
cons: 當網站架構變大時,JavaScript files 最後會很肥,很難維護。
AngularJS:
pros: 依照資源做事,只要分享的資料相同。 HTML 可以簡單的的複製、修改邏輯或維護。
cons: HTML 雜亂,會有大量的邏輯放在 HTML 上。
總之 AngularJS 是從架構這個思維出發。
所以 一開始起步做網頁的時候建立上會比較慢。(因須設計架構)。
可是當未來需要修改 spec 跟維護網站時,會覺得當初的思考架構是值得的。
jQuery 則相反, 非常方便操作 DOM 達到立即需要的效果,可是當要修改 spec 或未來維護的時候就會默默的嘆氣。
綜合以上, 我的建議是
做小型網站時,可以使用 jQuery。(資訊簡單,不會有大量的使用者互動)
製作中大型網站可以使用 AngularJS。(或其他 framework)
2. 從 jQuery 到 AngularJS
StackOverFlow 有一篇關於 "如何從 jQuery 思維轉變到 AngularJS 思維” 的文章。
寫的不錯,本來想要幫整理一下精簡本。可是再寫文章的過程中發現已經有中文版了!
AngularJS 官網說, 當你先 include jQuery library 後, angular.element 裡的 methods 會自動增加 jQuery element 的 method)。
假如沒有載入,就維持原本的 AngularJS jqLite 提供的 methods. (angular.element 列表)
一年前的我:
為了方便性,還是 include jQuery libary 好了。
這樣甚麼都可以用,反正現在 minify 後的檔案又不大。 (oh yeah)
一年後的我:
其實...好像真的用不到 jQuery 的 methods。
需求 AngularJS jqLite 其實都可以做到,只是需要換個角度好好想想。
網路上已經有很多用 AngularJS jqLite 完成的 jQuery methods 應用。
打個比方, 如何用 AngularJS 實做 jQuery.sibilings()
所以當發現 "天阿!! 我需要某個 jQuery methods” 時,先冷靜想想或查查資料。
大部分其實都可以使用 AngularJS jqLite 完成需求的。

這裡就不多說了,大家點選下面看看吧~~3. 須不須要在額外 include jQuery library?