jQueryへの依存を外す方法 - dely engineering blog
こんにちは！dely でフロントエンドエンジニアをしている @all__user です。 この記事は dely Advent Calendar 2018 の8日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 昨日は、iOSエンジニアのほりぐち（ @takaoh717 ）が「iOS版クラシルの開発からリリースまでの流れ」というタイトルで投稿しました。 tech.dely.jp iOS 版 kurashiru の開発体制の遍歴がよく分かるような内容となっていますので、ぜひチェックしてみてください！ はじめに ここ一年間で Web 版 kurashiru のフロントエンドは Rails から Vue の SPA へと少しづつ置き換えられ
Railsチュートリアル幻の15章 React編 - Qiita
社内で利用した、Reactの研修資料を公開します。 Railsチュートリアルの続編として作成したので、Rails上でReactを使うためには...ということが書かれています。Railsチュートリアルテイストになっていますが、一部社内でのコーディング規約や利用するライブラリについての言及があります。 また、研修ということで、ソースコードはGitHubの差分をスクショするという形で掲載しています。コピペできるコードが欲しいという人は、差分表示を作るのに使ったリポジトリを利用して下さい。 https://github.com/kouheiszk/sample_apps/tree/master/5_1_2/ch15 第15章 Reactの導入 この章では、サンプルアプリケーションで作ってきたUIパーツをReactというJavaScriptのライブラリを利用してコンポーネント化していきます。具体的に
Railsフロントエンド技術の今とこれから
待望されたYarnサポートの入ったRails5.1が2017年4月にリリースされました。 Ruby on Rails 5.1 Release Notes — Ruby on Rails Guides 他にもjQueryがデフォルトdependencyから外されたり、Optionalでwebpackサポートが入ったりしており、Railsのフロントエンドは大きな転換点を迎えたと言ってよいでしょう。本エントリではRailsのフロントエンド技術の今を振り返り、今後どうなっていくかをまとめてみたいと思います。 DisられてきたRailsフロントエンド Railsのフロントエンド技術スタックは、フロントエンドを専業とするエンジニアにDisられるものでした。具体的には下記の技術要素です。 jQueryCoffeeScriptAssets Pipeline (sprockets)gemのエコシステムに乗っ
Capybaraを使って、Rails+JavaScriptの非同期な統合テストを書く | POSTD
上からも分かるように、ページの読み込みが完了する前に、テストでリンク探しを始めたのにも関わらず、Capybaraは優雅にインタラクションを処理しています。 しかし、Capybaraがこれらの非同期の問題を処理してくれるにもかかわらず、成功したり失敗したりする一貫性のないテストにいとも簡単に陥ってしまうのはなぜなのでしょう。 競合状態の数を最小限に抑えて、Capybara APIを正しく使用するには、いくつかのコツがあります。 最初に適合するエレメントを見つける 悪い例 first(".active").click まだページに.active要素がない場合、firstはnilを返し、クリックは失敗します。 良い例 # 完全に一致するものが欲しい場合 find(".active").click # ただ単に最初の要素がほしいだけの場合 find(".active", match: :first
フルAjaxで動くRailsアプリを作ってみたよ。 | Ginpen.com
scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
A simple Rails 3 and Backbone.js screencast - Andrew Gertig
Tweet Tweet url: http://andrewgertig.com/2011/05/rails-backbone-js-example-screencast/ This is a quick screencast on how to use Backbone.js with a Ruby on Rails application. The screencast covers the simple example of submitting a form, saving the data to the database, and displaying the records in a table. The repo for the backbone-demo app I created for the screencast is on github. [UPDATE: if y
rails3とbackbone.jsの組み合わせで利用する2
■概要 前回に引き続き、backbone.jsを利用してjqueryでMVCの世界を、rails3と共に作っていこうと思います。 今回はデータのやり取りをする所までが目標です。 ■モデル/コントローラ等を作成する $ rails g scaffold post title:string body:text published:boolean $ rake db:migrate $ rake spec (とりあえずrspecが動くか確認しとく) $ rake spec:rcov (ついでにrcovが動くか確認しとく) $ rails s ここで http://localhost:3000/posts でいつもの画面が表示されてればOK! ■json入出力用にコントローラを修正する とりあえずjsonでやり取りできるように変更します。params.exceptはbackboneとのやり取りを考
Rails開発者ら、JavaScriptフレームワーク「Cinco」を発表：Rails Hub情報局：エンジニアライフ
Ruby on Railsの生みの親、DHH（David Heinemeier Hansson）らが、モバイル向けのフレームワーク「Cinco」（シンコ）を間もなくオープンソースで公開する模様です（思わせぶりなブログエントリ）。以下は、37signalsのCincoを使った最初のモバイルアプリ「Basecamp Mobile」のデモ映像です。 Cinco自体はまだソースコードが公表されていません。準備が整うまでに数カ月かかるだろと言っています。Cincoはモバイル向けフレームワークで、「基本的には単一ページのJavaScriptアプリを扱うためのRailsだ」と説明されています。対応するプラットフォームは、 iPhone 3GS iPhone 4 iPad Motorola Droid X Motorola Droid 2 Samsung Galaxy S HTC Incredible H
つくるぶガイドブログ: ドラッグアンドドロップで並べ替え(Rails + Ajax)
Ruby（とRails）を担当している石原です。 ソーシャル「OSを入れた後にインストールする10のアプリケーション」(仮) を作る過程をレポートしています。 これまでのエントリーはこちら ↓ つくるぶガイドブログ: Ruby on Rails を使ってひとりでサービスを作ってみよう つくるぶガイドブログ: ひとりサービスの雛型をつくる(リキッドレイアウト、GetText、Acts as Authenticated) つくるぶガイドブログ: Rails で楽々ソーシャルブックマークの仕組みを作る つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう 今回は、登録した10のアプリケーションをベスト1からベスト10まで並べ替えたい、ということで、ちょっと趣向を凝らしてそれをドラッグアンドドロップで出来るようにしたいと思います。 A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
backbone.jsが利用できる状態でrailsプロジェクト生成