Vue.js 由 1 到 2 的旅程 - (2)

第二集,我們要聊的是一個很瑣碎的點也許會造成您困惑,在精神不濟的情況下建議略過本文。如果您跟我一樣閱讀的是英文版的文件加上英文又不是很牛,那麼我想這個點可能會造成您的困惑。
如果您也曾對 string templatesnon-string templates 兩個詞有疑惑的話就讓我們繼續看下去…

繼續閱讀

Vue.js 由 1 到 2 的旅程 - (1)

這系列文章會是記錄從 Vue 版一轉移到版二過程中差異點的筆記,希望以輕鬆短篇的方式撰寫。小弟認為如果您不是那種會乖乖的把文件完整娓娓讀一遍的人,有許多差異點可能就被您忽略了,當然就把它們忘了或從來沒理解過(從 Vue 2 入手的朋友們)也不會是什麼大問題,反正等到您遇到問題的時候肯定又會找到它。不過這系列跟希望紀錄的是思路的演進,像是為什麼不支援內建 filter 這類的議題,每一次改變總有它的道理我們不一定能參透但試著想想看並記錄下來希望下一次能成為更好的開發者。

廢話不多說就讓我們開始來說今天的故事:

繼續閱讀

穠纖合度的整合 Rails、Webpack、Vuejs

前言

如果您曾經閱讀過小弟的vue + webpack 起手式一文,裡面我曾提到關於容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合。這篇文章主要就是用來介紹其作法與為什麼我會這麼說。

我先承認吧!我不總是需要使用 SPA 的架構 雖然它很好,但對於很多小型專案,或者我們應該說 UI/UX 設計本身非常單純的專案 - 殺雞焉用牛刀。所以這邊文章的作法針對的是那些專案不是使用 SPA 搭配 API 的架構的人,而是您覺得既有的 MVC 框架對於您的需求開發已經非常足夠且想保留大多數這些框架提供的功能(本文僅針對 Rails 介紹)。

網路上有非常多關於 Rails 與 Webpack 整合的方式,其實都非常不錯。而關於本文只是介紹其中一種小弟認為剛剛好的整合方式,其中許多觀念都不是新創的,都只是整理過去學習經驗而成。

繼續閱讀

[譯] Yarn - Javascript 新一代套件管理

本文轉譯並補充自 - Yarn: A new package manager for JavaScript

在 Javascript 社群中,開發者們分享成千上萬的原始碼讓我們可以省去重造輪子的時間,不用重新打造函式庫,框架,元件等。
而每段原始碼都有可能相依於其他原始碼片段,這些相依的程式碼通常會透過套件管理(package manager)來管理。
其中在 Javascript 裡,最熱門的就屬 npm ,在上面有 5 百萬個開發者,套件庫提供了超過 300,000 模組,更驚人的是每個月有超過 5 億次的下載量。

繼續閱讀

Vue + webpack 起手式

介紹

前端的世界變化之快速,從 2010 開始小弟經歷了 jQuery, Backbone, Angular, 到 React。這一路走來雖然學習到了許多高明開發者融合於框架或函式庫中的智慧,卻也因為不斷快速變化感到疲憊。時至 2016 小弟認為在實務與理想之間取得一個完美平衡的前端框架大概就屬 vue.js 了。

當然這前端世界裡並沒有萬能藥可以完美的處理所有問題,不過 vue.js 的精美,不只容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合,當要使用最新的設計模式如 Flux, redux 等也都是沒問題的,再加上易學與一些你肯定能感受到作者從實戰淬煉出來的特性。因此在 2016 我也決定轉戰 vue.js

繼續閱讀

npm 最佳實作的小技巧

npm 最佳實作

npm install 是我們最常在 npm 中用到的指令,但其實它還提供了更多的功能。在這篇文章中我們將會學到 npm 如何在開發過程中協助我們 - 從建立專案到部署應用程式。

繼續閱讀

筆記 Javascript 的 constructors, prototypes, new 關鍵字

您是否曾困惑關於 Javascript 中的 new 關鍵字呢?是否曾想理解關於 function 和 constructor 的不同是什麼?
還有 prototype 到底是用來幹嘛的?

這篇文章會試著讓您釐清這些東西。

網路上已經有許多討論關於 Javascript 非典型物件導向(pseudo-classical)的說明 - MDN
。您可以閱讀一下釐清這些術語。

繼續閱讀

Facebook Bot 開發小技巧

流程

  • 準備環境
  • 使用 ngrok 取得 https 網址
  • 建立與設定 Facebook App 與粉絲團
  • 建立 webhook GET API
  • 設定 Facebook App webhook
  • 實作 webhook POST API 產生對話
繼續閱讀

Vue 實作簡易驗證機制 App

為了顯示出 Vue.js 強大的能力 ,本文將會逐步指導建置一個簡單的前端應用程式。搭配 Node 所建置的後端程式範例。前後端兩個程式是完全分離的,後端使用 RESTful API 的方式負責取得資料與驗證。本文旨在說明如何替 Vue.js 程式加上驗證機制,過程中我們會使用 vue-router, vue-resource 實作 LoginSignup 元件展示如何檢索和儲存使用者的 jwt token,最後執行驗證機制取得那些需要授權的資料。

繼續閱讀