I have this bizarre idea that how can we replace the Rails erb templating with vue. I think even the simplest of the sites today are data driven and want to be reactive. For people like me who are boilerplate averse. I can do this with new Rails 5.1 but with the following limitations: The naturally available @variables are not present in js files, so I have to pass them as data attributes, use Gon
How we do Vue: one year later How we, at GitLab, write VueJS, one year later. It's been a while since we wrote about Vue. We've been using Vue for over a year now and life has been very good. Thanks @lnoogn for reminding me to write this article! Our situation reminds me of a quote about Scala from "Is Scala slowly dying?" Someone once said: Scala people don't have time for redditing and blogging,
Examples When to add Vue application What are some flags signaling that you might need Vue application? Avoid multiple Vue applications on the page Vue architecture Components and Store An index.js file Bootstrapping Gotchas Providing data from HAML to JavaScript The initSimpleApp helper provide and inject props Providing Rails form fields to Vue applications Accessing the gl object Accessing abil
Vue2.xでは仮想DOMが使われるようになりました。それに伴い、Vue用のテンプレートを仮想DOMをレンダリングするための関数に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン 1. Vueを<script>タグで埋め込む方法 2. Vue CL
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
こんにちは、フロントエンジニアのまろCです。 実家に帰省するたびに、大体同じメンバーと再会しています。さて、年が明けてから時間が経ってしまいましたが、昨年関わった案件でVue.jsを導入したので、今回はその所感をまとめてみました。 Vue.jsとは まずは、公式サイトでどんな説明がされているのか、確認してみましょう。 モダンな Web インタフェース向けのリアクティブコンポーネント Vue.js公式サイト：http://jp.vuejs.org 非常にシンプルですね！ データバインディングに機能が絞られているため、フルスタックのフレームワークより学習コストは低いです。公式サイトは日本語対応されており、事例コンテンツもあるので、気になった方はのぞいてみてください。 なぜVue.jsだったか Vue.jsを導入した案件の概要が下記のとおり。 案件概要 開発期間が短い フロントエンド、バックエン
追記: 2016/04/28 1.xのVueでは、Reactのようにpropsを利用することでコンポーネント間で値の受け渡しを行うことができます。 また2.0では、$dispatch, $broadcastは非推奨になるので、注意してください。 refs: 2.0 features · vuejs/vue Wiki · GitHub こんにちは。りんご と にんじん と 生姜の入ったジュースを飲んでいます、きたけーです。 今日はVue.js で 複数のViewModelの連携について考えてみます。 VueはViewModel間の親子関係を定義することができますが、今回考えるのは(DOMで)親子関係がなく「リストからひとつの項目を選択したときに、その項目の詳細を別の要素で表示する」ようなケースです。 べたに書くと、こんなかんじになります(Coffeeです)。 listVM = new Vue
こんにちは。明日はウルトラ花金です、きたけーです。 この前かいたVue.jsのコード(Vue.jsでページネーションを実装してみる - きたけーTechブログ, Vue.js で 複数のViewModelを連携させる - きたけーTechブログ)のテストをMocha+Chaiで書いてみた。 (微妙なコードですけど)こんなかんじ。 describe Menus, -> beforeEach -> @menus = new Menus data: menus: [ {name: "ikura", price: 100}, {name: "tako", price: 200}, {name: "maguro", price: 300}, {name: "uni", price: 400}, {name: "toro", price: 500} ] it "はじめのページであること", -> ex
概要 薄いフレームワークとしてVue.jsが有名ですが、規模が大きくなると結局たいへんなことになってしまうので、設計が必要です。また、Railsでアプリケーションをつくる場合、Vue.jsのComponentチックな志向をうまく利用するのが一工夫必要かと思います。 そこで今回は、Vue.js on Railsを、中~大規模開発に耐えうる、かつ、RailsとVue.jsのメリットを両方活かせる設計を考えてみました。 「さくっとフレームワークを導入したい！」という方にはやや面倒かもしれませんが、逆に、この通りに作りさえすれば、あとはVue.jsなので、難解な概念が出てくることはありません（個人的には、少なくともこれくらい設計しないとフレームワークを導入する意味が無いのでは?・・・と感じますが）。最初だけ頑張れば、あとは楽ですし、jQueryもそのまま動きます。 ※SPAなどではない、通常のRa
数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書いた時の最新のnextブランチ( fix eslint again · vuejs/vue@014ac35 · GitHub ) 2.0のポイント 内部で GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance. ベースのVirtual DOMを持つようになり、パフォーマンスが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
