ng-japan 2017「AngularとEelctronやIonicで挑戦した
デスクトップ・モバイルアプリ開発」AngularとEelctronやIonicで挑戦した デスクトップ・モバイルアプリ開発。 2017/06/17(土)にng-japan 2017で発表したICS池田さんのセッションのツイートをまとめました。
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のエコシステムに乗っ
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
Rails5.1から導入されるwebpacker.gemは本当にRailsのフロントエンド開発に福音をもたらすのか? - Qiita
Rails5.1が今betaで出ていますね。中でも目玉はwebpacker.gemによるモダンなフロントエンド開発がRailsに導入されることでしょう。 今までのRailsのasset pipelineとは別に、yarnによって依存性を管理しwebpackで結合する独立したjsのビルドシステムがサポートされます。 これによって、以下のような従来のasset pipelineでは解決がむずかしかった問題への解が示されました。 coffee scriptへの依存 npmによる依存性、バージョン管理が難しい javascriptのライブラリが野良gem化されてupdateされない問題 webpacker.gemはyarn/webpackの薄いwrapperとなっていて、加えて幾つかのrakeタスクを追加することでフロントエンド開発をサポートします。 具体的には以下のような機能が提供されます。 y
Webpackerを使ったRailsでのJavaScript開発 - クックパッド開発者ブログ
こんにちは。マーケティングプロダクト開発部の長田です。 この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。 これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。 このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発
既存のWebアプリをReactで書き換えた話（＋ES6の困った点） - ぱろっと・すたじお
本当は1ヶ月前に下書きを書いた記事なのですが、 忙しくて見直す時間がなく、だいぶ遅くなってしまいました(´･ω･`) その間にバグfixを進め、一応安定動作していますし、 それもふまえた内容に書き換えていく方向で・・・ 相変わらずメンテと拡張を続けている 「チェンクロパーティーシミュレーター」（以下「ccpts」）ですが、 先日Reactでほぼ全体を書き換えました(`･ω･´) ccpts.parrot-studio.com github.com ちょうど1年ほど前、私がReactを初めて意識した際に、 一度やろうとしたことはあるのですが、 いろいろな理由*1があって諦めてました しかし、昨年から仕事でNode.jsを扱うように*2なり、 先日はccptsのロジックをFRPで整理するのに成功したりと、 今ならいけるんじゃないか・・・と思い、今回試してみたわけです React（+flux）に
TypeScriptを使った方がいいケースとは？ | POSTD
去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを
#205 Unobtrusive Javascript - RailsCasts
<!DOCTYPE html> <html> <head> <title>UJS Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("#alert").click(function() { alert(this.getAttribute("data-message")); return false; }) }) </script> </head> <body> <h1><a href="#" id="alert" data-mes
Redux Patterns and Anti-Patterns
(Korean, Japanese) Redux is a surprisingly simple library for managing application state with a Flux-like architecture. Here at Affirm, we are particularly interested in Redux’s time-travel capabilities. Our core business is offering transparent consumer loans, so it’s incredibly valuable to be able to replay the entire loan application process from the user’s perspective. Redux is more of a set o
ReactとCordovaで、Web/モバイルのハイブリットアプリを作った話 - うなの日記
ReactとCordovaを使って、ブラウザ向けのWebUI + Androidで動くスマホアプリ を提供するサービスを、一人で作ってみた話です。 サマリー 作ったもの 最大の課題:作業量 一人で作りきるために意識したこと 取り組み1: Cordovaを使って、Web UI/スマホアプリのコードを共通化する 取り組み2: レイヤードアーキテクチャを採用し、共有できるコードを最大化する 取り組み3: ユニットテストを書く まとめ 作ったもの jiji2.unageanu.net 自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんにFX自動取引を開始できる、システムトレードフレームワークです。 アルゴリズムの作成、バックテスト、リアル口座での自動取引まで、これ一つで可能。 取引アルゴリズムはRubyで記述。メール送信や取引タイミングのPush通知も、APIを呼び出すだけで実現できます。
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
Unity で作ったインディーゲームの WebVR 出力
この記事は “Exporting An Indie Unity Game to WebVR” の抄訳です。 ツールをダウンロードしたりインストールをすることなく VR コンテンツをすぐに楽しめる WeVR は、未来における VR コンテンツアクセスの鍵を握っています。少なくとも、私たちはそう考えています。私たちは Jump と呼ばれるマルチプラットフォームなデジタルゲームの定額サービスを構築しています。Jump では、デスクトップやモバイル、ゲーム機、そして VR デバイスに向けた Web 技術のみで作られ「Web ネイティブ」ゲームを配信しています。私たちはビジネスを Web ネイティブな技術、HTML5、WebGL、JS、そして早晩リリースされる WebAssembly に賭けたのです。そしてWeb がバーチャル・リアリティに対して、いかに強力な存在であるかを示すことにしました。そのた
ブラウザゲームを作ろう。様々な種類に対応したJavaScriptゲームエンジン·The Render Engine MOONGIFT
The Render Engineはクロスブラウザに対応したデスクトップブラウザ向けのJavaScriptゲームエンジンです。 ここ数年ゲームが人気です。特にWebブラウザやスマートフォンなどで遊べるものが注目を集めています。そこで知っておきたいのがThe Render Engineです。クロスプラットフォームで使えるデスクトップ向けJavaScriptゲームエンジンです。 オブジェクトが回転するデモです。 アステロイドです。十字キーで移動しつつ、Zキーで弾を撃ちます。 スーパーマリオ風の画面描画（操作はできません）。 オブジェクトが落下してくるデモ。 人間が倒れるデモ（関節などでオブジェクトが接続されていて、それらが関連しつつ動きます）。 シム系で使えそうなデモ。 The Render Engineはクロスブラウザではありますが、それでもIE6〜8についてはCanvasをサポートしていな
TodoMVC
Thanks for stopping by! Let's get started TodoMVC is a common set of JavaScript examples for MVC frameworks like SproutCore, JavaScriptMVC, Backbone, YUILibrary, Spine, Sammy, AngularJS and others. Live examples To preview a Todo implementation for a particular framework, simply select it from the menu to the right of the screen. Depending on the browser you're using, you may need to access the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/rails-angular
Nyle Engineering Blog
blog/articles/201203.md at master · kengonakajima/blog
