愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato
「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 こんにちは、ログラスのエンジニアの佐藤です。 昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。 「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 と、CTOに言ったのは昨年末くらいでした。 入社してまだ1ヶ月経たないくらいです。 ログラスは創業当時からAngularを使って開発をしていました。 正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。 そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。 今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ
Angular&Firebase を使ってがっつりサーバーレスな Web サービスを作ってみた - Qiita
はじめに 「Angular」と「Firebase」を使ってサーバーレスなWEBサービスの開発・運用したノウハウを紹介します。 この記事では詳細な技術的なことにはあまり触れず、「どんな技術を使用してWEBサービスを作ろうか」を検討している人向けに記載しています。 みなさんのサービス開発時の検討材料になれば幸いです。 Angularとは Googleによって開発が進められているJavaScript(TypeScript)フレームワークです。SPA(シングルページアプリケーション)が容易に作成できます。 Firebaseとは Googleによって開発が進められているWEBサービスやモバイルアプリに必要なサーバー処理を提供するmBaasサービスです。 要件 以下の要件を満たせるものを目指しました。 No. 要件 実現方法
1分でわかるAngularJS開発ツールBatarangの使い方
Batarangとは Chromeの拡張機能でデベロッパーツールにAngularJSタブを追加してスコープの中身、パフォーマンス、DIなどを確認することができる。 Batarangをインストール Batarang確認用サンプルページ Modelsタブ ScopeとModelを確認できる。< Scope (006)の「<」をクリックするとデベロッパーツールのElementsタブがアクティブになり該当箇所が表示される。 Performanceタブ 各部分のパフォーマンスを調べることができる。 Dependenciesタブ Dependency Injection(DI)の相互関係を確認することができる。 マウスオーバー時に緑だと依存されている マウスオーバー時に赤だと依存している Optionsタブ Show applicationsを有効にすると緑線で範囲を表示 Show bindingsを
AngularJSのパフォーマンス改善入門 - Qiita
これまでAngularJSでアプリを作ってきた中で、いくつかパフォーマンスの問題に遭遇しました。 それらの問題は、AngularJSの仕組みを十分に理解できていないために、よくないコードを書いてしまって発生しているものでした。 というわけで、AngularJSの内部構造を解説しつつ、パフォーマンスを改善するコードの書き方を紹介したいと思います。 計測できないものは改善できない パフォーマンス問題に取り組むには、ソースコード修正の前後でパフォーマンスを計測し、改善の効果を計測することが重要になります。 というわけでまずはツールの紹介です。 AngularJSでは、Batarangという便利なツール（Chrome Developer Toolsの拡張機能）が用意されています。 利用方法はとても簡単で、下記のChromeウェブストアからインストールして、Chrome Developer Tool
AngularJSを使ってタグベースのはてブビューアを作ってみた - 無理しない感じ
はてブビューア Skimii http://skimii.net 作ったもの タグベースのはてブビューアを作りました。 ウォッチしたいキーワードをタグとして登録すると、ブックマークされたエントリをタグごとに一覧表示します。 Skimii 作った理由 自分の興味対象にピンポイントでアクセスしたいという理由です。 はてなブックマーク公式では、かなり大きなくくりでのカテゴリ分けなので、ウォッチしたい対象にピンポイントでアクセスしにくいなぁと感じていました。 タグごとにエントリを表示できるので、対象を絞ることができノイズの少ない情報を得られるかと思います。 しかしながら… インタレスト機能 - はてなブックマークヘルプ すでに公式で同じものが提供されています。作成途中で気づいた… ただ、公式には無い機能もあります。 ブックマーク数の閾値設定 すでに読んだエントリを表示しない設定 構成 フロントエン
マネージャのためのAngularJSの概要 Part 1 | POSTD
私が空き時間にAngularJSを使って様々なものを作成し始めたのは2013年の終わりのことです。この頃から続く経験は実に有益で、今でも多くのことを学んでいます。私とJavaScriptとの関わりはIBMでDojoを使って単一ページアプリケーションを構築したところから始まります。その後バックエンドでNode.jsを、フロントエンドでAngular.jsのみを使う会社に移りました。 IBMでは、チームに対してAngular.jsに切り替えるよう言い続けていました。この記事の初稿を書いたのもAngularJSでエンタープライズ向け単一ページアプリケーションの構築が出来ることを客観的に主張するためです。特に私が伝えたかったのが、大企業がAngularJSに切り替えることにはメリットこそあれ、デメリットは何もないということです。それから数か月間Angular.jsだけを使い続けていますが、核となる
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか？ 使いにくいところは？ などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 ふだんなかなか聞けない、AngularJSを現場で使っている人たちの本音が詰まっていたセッションの内容をダイジェストで紹介しましょう。 AngularJSのFAQ 川田氏 今日は、AngularJSを使って開発している方、AngularJSの本を執筆している方々に、Angu
Angularチームは、どうかしちゃった？ | POSTD
私は 以前の投稿 で、Angularなどのフレームワークがあまり好きではない旨を述べました。宣言的なHTMLのタグや属性、{{二重波括弧}}のプログラミングを開発するということには、 どうも抜け落ちている部分がある ようです。そして、どのフレームワークも独自のやり方で開発されているため、それを理解しサポートするためには、ツールのアップデートに多大な労力を 浪費する 注ぐ 必要があります。 さらに、そんな先入観を抜きにして考えてみても、Angularの今後に関して最近入ってきた情報は、私がますます頭を抱えてしまうような内容だったのです…… ツールに新たに追加される概念は、1つではなく3つ！ Angularをサポートするためにはツールのアップデートが必要ですが、今は下記を考慮していく必要があるようです。 Angular v1の構文 Angular v2の構文（従来と 大きく異なる ようです）
AngularJS 嫌いな人が多い昨今について - tokuhirom's blog
最近 AngularJS 嫌いという言説が多いですが､そういうことを仰る方々は主に先鋭的な JSer のように思います｡ ただ､僕なんかの場合には､ユーザー向けの画面の構築などには AngularJS を使って書くことは最近はほとんどなく､JS を書くといえばもっぱら管理画面です｡ 管理画面の JS を書くにあたっては AngularJS way にのっかってやると非常に楽ですよね｡管理画面を書いたりする上では vue-js とかで頑張って書くと見通しが悪くなったりしますし､こった動きなどは必要ないというところで angular.js ワリといいなと思っています｡ もっといいものがあれば移りたいですが､コストをかけずに作りやすい管理画面を作るという意味ではやはり AngularJS にまだメリットがあるなあ､と思っています｡ 2.0 が出た時にこまるというのもありますが､実際は angul
【あの有名サービスが】コードリーディングで学ぶAngularJS【丸裸に】 - 不格好エンジニア
コードリーディング AngularJS初心者です。 コードリーディングという形で、AngularJSで実装されたWebサービスのソースコードを題材に使って、その動きや機能がどのように実装されているのかを、ソースコードのレベルで解析していこうと思います。 ※時間のある時に、随時追記していきます。 題材「FMTube 」について コードリーディングの題材とするのはこちら。 ゆーすけべーさんが、AngularJSの勉強中に作成したサービスだそうです。 FMTube! アーティストの名前を入れると、楽曲リストを順番に再生してくれます。 素晴らしいです。勉強させて頂きます。 ソースコード ソースコードですが、Webサービスとして公開しているので、当然、Webブラウザから確認することができます。 メインロジックは、こちらに記述されています。 http://yusukebe.github.io/FMTu
AngularJS用テストフレームワーク「Protractor」チュートリアル日本語訳 - Qiita
Protractorとは、AngularJSアプリケーションのためのエンド・トゥー・エンド（E2E）テスト・フレームワークです。これはProtractor Tutorialの日本語訳です。 これはシンプルなチュートリアルです。内容は、Protractorをセットアップし、テストを走らせ始める方法です。（訳注：protractorは分度器のことです） 訳注：本チュートリアルのサンプル・リポジトリを作りました。参考になれば幸いです。 準備 ProtractorはNode.jsのプログラムです。動かすには、Node.jsをインストールしておかなければなりません。ProtractorはNode.jsについてくるnpmを使ってダウンロードすることができます。node --versionと打って、Node.jsのバージョンをチェックして下さい。v0.10.0以降でなければなりません。 デフォルトでは、
Rails+JSフレームワークでリアルタイム掲示板を作成してみる（AngularJS編） | Oh My Enter!
あー、俺もそろそろ最近のjsフレームワーク覚えなきゃ・・と思い始めてから早３プロジェクツ。自分で作りたいWebサービスがあるのだが、どのフレームワークを使用するのがベターなのか正直よく分かんない。有名どころののAngularJS, Backbone.js, Ember.jsのいずれかがよいのだろうと思うが、それぞれ一体どんな特徴があるのだろうか。というわけで今回は、各フレームワークを使用して実際に簡単なアプリを作成してみることにした。まずはAngularJS、お前からだ！ こんなアプリを作る 掲示板アプリを作ってみようと思う。単なる掲示板だとつまらないので、twitter風に自動で投稿が表示されるようにしてみた。 環境 Ruby on Rails 4.1 AngularJS 1.3 セットアップ 全てはGemfileから始まる。ポイントはRails Assetsを利用している点。Javas
安全加密检测
已通过安全加密检测 如果没有自动跳转，请点击下方按钮前往 点击进入购彩中心360安全卫士提供技术支持 Copyright © 1998 -2020. All Rights Reserved.
オレ流AngularJSを使った設計ポリシー
Chrome MySQL Adminでは、 AngularJSを使って実装を行っています。Chrome appsでは、 何らかのMVC Frameworkの利用が勧められています。 AngularJSは、Controller、Directive、Template、Serviceなど、いくつかの部品群を組み合わせてアプリケーションを構成することになります。その機能の豊富さ故に、実はちゃんとしたポリシーを決めておかないと、いかようにでも作れてしまうために、かえって複雑さが増してしまうという危険性も出てきます。もちろんアプリケーションの作り始めは試行錯誤の連続なのですが、徐々に自分なりのポリシーみたいなものが確立されてくるはずです。 本エントリでは、Chrome MySQL Adminでの設計/実装ポリシーを簡単に紹介してみたいと思います。ちなみに、全てのソースコードは、以下にあります。 htt
Object.observeのGoogle Chromeでの先行実装とAngularについて - mizchi's blog
読みました。 Angularが好き - Can I do web? https://twitter.com/agektmr/status/519128909695045633 僕の中で、Object.observe なんてどうみてもangularのためじゃんって雰囲気が最初からあって、あまりにも当前だと思っていたので、さも事実のように書いてしまってました。 実際に検索してみたところ、その関係に実際に言及するような資料は発見できませんでした。この点は僕の想像でした。申し訳ありません。 ですが、検索すると僕以外にも多くの人がそう思っており、それなりに根拠もあります。なぜそう思っていたのか、その理由を提示します。 2012/06 Angularの公開リリース 2012/11 Object.observeの仕様の初出 http://wiki.ecmascript.org/doku.php?id=h
Angularが好き - Can I do web?
ボクは本当にAngularが好きで、もはや恋するレベルに達していて、今ではもう実案件に使っている。 イカ理由。 APIがほんっっっっっとうに糞 趣味の問題といえばそうでもあるが僕は糞だと思う → 趣味には口を出しません。そう思うならそうです。 実装が黒魔術 良識あるJSエンジニアなら Function.prototype.toString() しない 実際に一部のクロージャが破壊されてて挙動が直感に反する DirtyCheckの実装、表面的にもDirtyな挙動として現れるのでデータバインドとして何も嬉しくない →データバインドだったり、Web Components のような、未来にnative実装されるAPIを包括的に実装しようとした結果の１つだと思ってます。 もっといい方法はあるのかもしれないですけど、Angularではこうしてるよっていうのが現状なのかなと。 上記で毒づく程不満はないで
AngularJSは今すぐ生まれ変わるか死ね - Write and Run
mizchi 氏のエントリを踏まえて。 Angularが嫌い - mizchi's blog 何をやるにもググって解決しなければならないぐらいには一貫性がない マジでこれ。設定が多すぎる。特に directive 定義。どうやら Web Components の流儀に沿うようになっていて、将来的には Web Components に乗っける、ということらしいが、そもそもの Web Components の仕様が汚いし、救いようがない。 参考: AngularJS: Developer Guide: Directive 制御構造と要素を分離してねぇせいで replace とかいうオプションが生えてるし、tranclude との組み合わせでより複雑なことになるし、isolated scope な directive は併用できないとか、ng-repeat で作られた scope の下に他の d
Angularが嫌い - mizchi's blog
僕は本当にAngularが嫌いで、もはや許せないレベルに達していて、今ではもう本当に使いたくない。 イカ理由。 APIがほんっっっっっとうに糞 趣味の問題といえばそうでもあるが僕は糞だと思う 実装が黒魔術 良識あるJSエンジニアなら Function.prototype.toString() しない 実際に一部のクロージャが破壊されてて挙動が直感に反する DirtyCheckの実装、表面的にもDirtyな挙動として現れるのでデータバインドとして何も嬉しくない Googleだから許される、みたいなコミュニティの驕りが本当に嫌 Angularの都合だけでChromeでObject.observeを前倒しするのやめろ Angularの内部モジュール同士が密結合 DI, module, factory, それぞれ大きなテーマなのに密結合 使いはじめるとAngularをやめることが困難 パフォーマン
積極的に利用したい AngularJS グローバル API | DevelopersIO
本記事で使用している AngularJS のバージョン 1.2.16 フレームワークが提供している機能は積極的に使いたい AngularJS の標準モジュール (ng module) には、サービスやディレクティブといったメイン機能以外に、便利な関数群のコンポーネントが用意されています。 ng(core module) Global APIs https://docs.angularjs.org/api/ng#function AngularJS を利用している以上は、他所のライブラリやフレームワークを極力使わずに、依存性を減らしてアプリケーションの純度を高めたいと考えています。たとえば、真偽判定 ( オブジェクトの評価 ) や配列走査する場合においても、提供されている API を積極的に利用するよう心掛けたいものです。 というわけで、実際に利用している API をいくつか紹介したいと思い
AngularJS使い方メモ - Qiita
AngularJSアプリケーション開発ガイド を読みながら勉強したときのメモ。 HelloWorld AngularJS を入手する 公式サイトから angular.min.js をダウンロードする。 HTML を書く <html ng-app> <head> <script src="angular.min.js"></script> <script src="helloWorld.js"></script> </head> <body> <h1 ng-controller="HelloWorldController">{{message}}</h1> </body> </html> angular.min.js を読み込む。 ng-app ディレクティブを付けたタグの中が、 AngularJS のテンプレートとして処理される。 ng-controller ディレクティブを付けたタグの中
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
