emmet,jade,haml, slim,less,sass,coffeescript等的實戰優缺點

摘要: 文章背景，來自於羣內週五晚上的一次頭腦風暴式的思惟碰撞交流活動。

隨着前端技術的蓬勃發展， 各類新技術隨着生產力的須要不斷的涌入咱們的視野， 那今天探討的話題是這些新時代的前端兵器譜： 
一. html : Emmet,jade,haml,slim 
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html 
二. css : less,sass,stylus 
http://www.zhihu.com/question/20300388 
三. js : coffeescript 
http://www.zhihu.com/question/19943552 
四. 模塊化： seajs, requirejs 
http://seajs.org/docs/#docs 
http://www.vipaq.com/rtfm/JavaScript/RequireJs/zh-cn/2.1.9/api.html 

只是以第三方使用者的心態，討論各個技術的優缺點或填坑經驗， 
或現有手頭現成資源的分享。禁止針對某人的人格評論或人身攻擊， 
一切以和諧，雙贏，團結一心的前提下參與討論。 
今天的話題主持人：[才子]，他本人熟悉這些技術中的大部分並已經用於實戰， 
由他來引導或分享總結這次討論。 
這樣會產生一個臨時管理，主要負責本週討論細節。 

一. 

1. 先說emmet，這玩藝是俄羅斯人搞出來的，本來叫zencoding後來改爲emmet了， http://docs.emmet.io/ 
這個功能簡單粗暴觀看裏邊的watch demo基本都能瞭解一二。 

值得一提的是有兩個編輯器對這個技術的支持： 
sublime text 是全部編輯器裏邊支持emmet比較好的的惟一一款。 
webstorm是全部編輯器裏邊惟一內置emmet的一款，而且將emmet的精神往前推進的一款。 
http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html 
phpstorm，idea包括全部webstorm的功能。只是phpstorm是針對phper的，idea是針對javaer，webstorm針對前端er。 
http://www.cnblogs.com/jikey/p/3607133.html 

emmet與下面幾種技術的區別，他是一種思路或哲學，webstorm將這個哲學廣度化， 
除了能夠擴展css,html以外，還能夠擴展js,php,sql,java and so on. 
不須要任何的框架，只須要一個編輯器。 

2. 

Haml：代替erb，用在Rails上一種模板語言 
Jade：Node上的Haml 
Slim：跟Haml同樣，也用在Rails 

這三個模板語言語言都有一下幾個特色： 
層次清晰，採用縮進來表示層次和tag的閉合。 
簡化tag編寫，直接使用#id的形式去生成一個帶id的div。 
依附於各自的平臺（Rails和Node），能夠很方便使用include和mixin，消除文件級別的重複 
均可脫離平臺單獨應用，脫離平臺後，功能會受一些限制。 
參考自：http://lishoubo.github.io/2013/03/02/jade-haml-and-slim/ 

二. 
less跟sass的比較： 

他們都是CSS相關的技術，業界的統稱：CSS 預處理器，css預處理技術等等的叫法。
這個處理器使本來靜態的css具有基礎編程語言的處理能力，好比使用變量，簡單的代碼邏輯，函數等等編程語言中的基本技巧。
sass和less使用的是標準的css語法。

sass相比less功能更強大， 
http://www.oschina.net/question/12_44255 
大漠老師是sass的高人或國內這方面的領軍人物， 
除了http://www.w3cplus.com以外，還運營另一個站http://www.cn-sass.com/ 
堪稱是sasser的福音。 

less能夠引入一個js文件就能夠幹起來了，sass須要依賴ruby環境， 
那麼stylus就須要依賴nodejs 
Stylus: 
http://www.zhangxinxu.com/jq/stylus/ 

下面是[才子兄]的分享： 

一、咱們第一次使用這個組合是有人搭了個框架，我第一次用時有點反感，疑問，
這個東西能提升效率麼？跟大多數人的想法一致。
二、對新生事物老是持有懷疑態度，我想這是大部分人都有的
在webstorm能夠實時把sass的文件編譯成CSS
三、由於咱們習慣拿固有思惟來看待新事物，這是人的惰性使然，不肯意接受新事物。
四、使用了以後的第一反應是，coffee編譯生成的js執行不了怎麼辦
五、由於coffee，特別是拿它來寫服務端node，要調試很麻煩，老是直接console.dir xx
六、前端的coffee jade stylus就好辦得多，咱們從頁面請求一條node路由，而後node實時編譯成對應目標代碼 js html css
七、而後啓動node服務，在瀏覽器刷新就能夠看到執行結果了，但這裏面存在一個難點，怎麼實時編譯呢？
八、原來是調用對應的node模塊，把前端請求的rest實時編譯成js html css以後，插入頁面對應的提放。好比js插入body結束以前
九、這樣的好處是開發的時候，你就直接寫coffee jade stylus實時刷新頁面就能夠看結果。當你要部署到生產環境是使用 grunt編譯、合併、壓縮成css、js。
十、上面就是咱們的實踐了，目前運用於一個電商網站。
十一、那麼coffee要注意什麼呢？
十二、coffee把（） {} ； 這些C語言系的表明語法消滅了90%
1三、它使用空格+換行來表示這些包含和代碼塊
1四、coffee的好處是什麼 當你使用異步回調時 例如 http.get(function(err, res){}); 相似這樣的，嵌套不少很煩
1五、coffee只要簡單地換行
　　http.get (err, res)
　　　　#your handle code here
　　http.get (err, res) ->
　　　　#your handle code here
1六、這個能夠說是革命性的創新，由於http請求自己異步的特性，嵌套不少層。
1七、而後coffee會自動在函數末尾返回return，因此平時咱們寫的func = ( ) { var a=1; return a;} coffee能夠簡單寫成
　　func=() ->
　　　　a=1
1八、或者 更簡潔的當函數沒有入參時更簡便
　　func = ->
　　　　a=1
1九、用coffee時若你配合angular使用要注意了，當你使用angular.element 選擇元素和操做元素時，而這一行恰巧在函數的最後一行，那麼就會報錯。
20、由於coffee會自動把這一行return，而angular是不容許返回dom的。所以你須要在這一行以後顯示地加一行
angular.element
return
2一、coffee這種就是消滅了這些無謂的 （） {} ；這些符號，簡便的函數表達式。 使得效率會提升30%。
2二、stylus使用的心得是，它幫助咱們實現不少兼容問題
2三、好比咱們經常使用的 -ms -moz -web-kit這些css3前綴，那麼stylus裏不用了
2四、它會幫助咱們加上
2五、stylus裏面複雜的運算那些項目中實際不多用到，最實用的是extends 繼承
2六、當你多個地方的樣式都複用一段代碼時，用它能夠很省事
2七、還有咱們 display:inline-block;在ie6裏咱們用_display:inline,ie7用 *display:inline，而stylus裏，咱們用display()就能夠了
2八、下面說一下jade的好處吧
2九、剛纔必定有人問，爲何不用sass而用stylus
30、是這樣的，使用sass很麻煩的地方就是，它須要安裝ruby環境，同時它還保留着css的花括號等，比較醜陋。
3一、所謂大道至簡，加上jade配合stylus這兩個都是以css類來編寫的，也就是用可用一樣的層級顯示。
3二、層級縮進語法的好處能夠直觀的表述dom
3三、stylus還有好比圖片的自適應，上圖的截圖就是
3四、jade的好處是，它的動態部分不會侵入dom，不像angular同樣注入dom的屬性
3五、jade還有諸如include能夠包含其它文件，minxin能夠封裝一份dom，能夠把它當函數看。
3六、好了，以上是個人分享，你確定但願我多多貼上代碼，但是我認爲真正要作好一個事情只有「絕知此事要躬行」，不要聽別人說這個好，那個好的。
3七、除了上面3項技術，將來還可能有新的技術出現
3八、缺點就是，你不會的時候，以爲它很難
3九、而實際上，我用這三個工具，很順心，並無說是優勢。
40、你想到什麼，你就描述一下，不用想我漏了括號呀這些，這種縮進語法，就是好比你打草稿時那樣爲所欲爲
4一、coffee只是咱們編寫的時候，最終到生產環境是要用grunt來合併壓縮、語法檢查等等並生成js的，我上面已經寫了前提。
4二、我以前也作過比喻，當你用手動擋的時候，你總以爲自動擋不靠譜，會不會弄錯。而擋你習慣自動擋以後，你就能夠省心了
4三、具體的語法細節，大家本身去實踐吧，又想用，又不肯意花時間學習，而把時間放在 微博、朋友圈、論壇這些娛樂信息上。而真心想去學習時又感受到技術難懂，很艱苦。而像這些縮進語法則讓你寫起來產生愉悅感。
4四、實際上回調嵌套這些，有async庫，這個能夠解決嵌套的麻煩。
縮進語法是一種潮流，它解放了人的雙手，一行代碼少打5個字符，讓你的腦殼能夠更深刻想代碼的質量和可靠性
其實我以爲很重要的一點，對於大多數人而已這些技術沒有從根本上提高技術等級，只是加快了開發進度，但這卻又還沒到他們關心的事情
若是團隊中使用coffeescript，sass,jade，新手大概培訓多久就能夠入手？
4五、若是有基礎7天
4五、實際上要寫好代碼跟上面的工具是沒有關係的，是跟你的修養有關。
4六、這些工具是在你有了必定的基礎和修養的狀況下，可讓你更加愉快地完成任務。
聊技術扯技術就是從純技術的角度看了，試着瞭解一下，普及一下，而後有興趣的去本身動手，沒興趣的只當見識一個新名詞，下次聽起來也不陌生。
4七、新手也能夠發言，只要老闆要求你在很短的時間完成任務，而後別人都撐不下去了，而你卻打敗了內心的掙扎，不抱怨，並找到方法論。那麼你就能夠發言。
4八、成長老是痛苦的，老是會付出艱辛的。

三. coffeescript 

coffeescript的語法借鑑於python或ruby，從這些語言上借鑑了優秀的一些思想，
好比縮進代碼大括號，行尾不須要分號，
不用特別寫return等等。

參考自：http://www.cnblogs.com/lavso/archive/2012/11/03/2752908.html 

四. 

關於seajs,requirejs 
http://www.zhihu.com/question/20342350 
這個回答基本可以解決基礎的疑問。 

兩個遵循的標準不同而已，一個cmd,一個amd，而後，cmd在前，amd在後，amd裏邊有requirejs，cmd裏邊有seajs 
但這對咱們又提出了新的要求，在寫公共的東西的時候不得不提供兩個標準的支持。 

(function(root, factory){
    if(typeof define === 'function' && define.amd){
        define(['jquery', 'exports'], function($, exports){
            root.Dog = factory(root, exports, $);
        });
    } else if (typeof define === "function" && define.cmd) {
        define('Dog', function(require, exports, module){
            var $ = require('jquery');
            module.export = factory(root, exports, $);
        });
    } else {
        root.Dog = factory(root, {}, (root.jQuery || root.$));
    }

}(this, function(root, Dog, $){
    $.extend(Dog, {
       init : function(){
           alert(111);
       }
    });

    return Dog;
}));

 

 

總結：除了來自於自身的阻力以外，其它的均可以承受。 
主要的客觀阻力在於平臺的依賴性，雖然這個因素不是主要的， 
可是相應的平臺下面可能更符合當時設計的哲學。 
好比有ruby,python基礎可使用sass,coffeescript，若是是nodejs則使用stylus,Jade等。 

 

---

前端開發qq羣：348090425 ，禁止閒聊，非喜勿進~！