なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ
2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><
Angular2+ SPA に JavaScript 実装の QR コード読み取り機能を搭載するにあたり、既存の JavaScript ライブラリを選定した結果発表 - Qiita
Angular2+ SPA に JavaScript 実装の QR コード読み取り機能を搭載するにあたり、既存の JavaScript ライブラリを選定した結果発表JavaScriptTypeScriptQRcode 現在開発中の Angular2+ SPA プロジェクト ( モジュールバンドラーは webpack を採用 ) に、デバイスのカメラを使って QR コードを読み取る機能を搭載することとなりました。 そこで、QR コードを検出・読み取りする JavaScript 実装のライブラリを選定することとしました。 結論: jsQR https://www.npmjs.com/package/jsqr ( GitHub ) Apache-2.0 イメージを渡すと、そのイメージ内の QR コードを検出・読み取って返すのみに特化されているライブラリです。 カメラや video 要素の制御につ
FluxとDDDの統合方法 - かとじゅんの技術日誌
おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i
JavaScriptのUIライブラリはどうあるべきかという話とOnsen UIのアーキテクチャ - id:anatooのブログ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
イベント用の名札シート印刷アプリ「参加者の名は。」を作った - エンジニアをリングする
こんなものを作ってみました。 yoshiko-pg.github.io ConnpassのイベントURLを入力してCreateボタンを押すと、名刺サイズの参加者の名札を印刷プレビューできるようになっています。 （主催するイベントがないけど動きを見てみたい場合、入力欄右下の「demo」を押すと雰囲気がわかるかと。） 右下の印刷ボタンで印刷できます。 管理者や補欠者もお好みで含めることができます。 背景 カンファレンスや勉強会って、普段ネット上でしか知らない人と直接話せる機会でもあると思うのですが、いざその場で顔や名刺を見ても誰が誰かわからないんですよね。。 SNSではよく見るけど顔がわからなくて、でも話したいことがあるときとか、頭の上にアイコンとIDが表示されるメガネがほしい・・・ってたびたび思ったりします。 そんな思いから、自分がスタッフとして関わっているイベントではアイコンとIDの入った
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
Angular2 AoTコンパイルでTechFeedを高速化した話
前回のエントリで、TechFeedをProgressive Web Apps化した件について書きました。今回（2016/11/8）のバージョンアップでは、もう一つ大きなトピックがあります。それはAngular2のAoTビルドに対応したことでTechFeedの起動時間を大幅に削減したことです。 Angular2のAoT（Ahead of Time）ビルドについては、ググってみても意外と日本語のいい記事がないので、ちょっとだけ解説します。 AoT概要Angular2アプリは、コンポーネントのツリーによって構成されます。コンポーネントは初期化される時に依存しているオブジェクトを注入（Dependency Injection）されたり、コンポーネントの状態を検知してUIを書き換えたりと言った様々な処理が必要です。Angular2は、ランタイム本体がそれらを動的に行うのではなく、そうした処理をハード
Angular AoTガイド - Qiita
はじめに どうも。最近、方々で「build筋」だの「うぇぶぱっ筋」だのと発言して顰蹙を買っている @Quramy です。 さて、皆さんAngularのAhead of Time(以下AoT) Compileは利用していますか？ とても良い仕組みだと思っているのですが、まとめられた記事もまだ殆ど見かけません。 僕自身は少し前に業務案件に適用させたばかりです。折角なので記憶が鮮明なうちに投稿にしておこうと思った次第です。 このエントリは下記の3章構成でお届けします。例によって結構長いので、自分が必要としているテーマに合わせて好きな部分を読んでください。 基本編: AoTの仕組みについてのざっくり解説. 知っている人は読み飛ばしてOK 実践編: 主に僕がAoTに取り組んだ際に行ったこと、ハマったポイントについての説明 発展編: AoT環境を手に入れた後に何をすべきかについて 対象読者 このエント
キミはNativeScriptを知っているか？Angular2でネイティブモバイルアプリが書けるぞ！ | HTML5Experts.jp
キミはNativeScriptを知っているか？Angular2でネイティブモバイルアプリが書けるぞ！ 佐川 夫美雄（Ashiras, inc.） Web技術でアプリ開発2016特集・第4弾は、JavaScript（およびTypeScript）によるクロスプラットフォーム開発が可能ながらネイティブと同様の実行速度を得られる、Telerik社のNativeScriptを取り上げたいと思います。 NativeScriptは、Angular2とも組み合わせて使うことができる、現在注目のフレームワークです。本記事では、XMLによるUI定義を行う従来の開発手法だけではなく、Angular2（ただし、RC4という少し古いバージョン）と組み合わせてモバイルアプリを開発する方法まで網羅してご紹介します。 NativeScriptの概要 NativeScript 2.0は、JavaScriptとCSSを使用し
TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();
そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とかあるかもですよ。 トークバトル React / Angular 2の概要 スター数とかバージョンとか コードがだいたいこんな感じとか 開発言語 こば: だいたいBabel、TypeScriptでもやれる 会長: だいたいBabel使ってると幸せになれる らこ: JavaScript or TypeScript or Dart らこ: まあTypeScriptですよね らこ: Dartはリポジトリが分かれました はち: ReactやるからAngularやるからで開発言語を選ぶのはナン
TypeScrtiptでGraphQL書いてみない？ - Qiita
誰? @Quramy 最近GraphQL触ってます GraphQL is 何？ Clientが欲しい値だけを問い合わせるための仕組み 階層的にデータを要求できる 厳密な型定義(schema)がある https://www.graphqlhub.com/playground を触ると良いかも。 ReactよりAngularの方が得意なので慣れているので、無理やりAngular2 でRelay動かしたりする遊びが趣味です。 https://quramy.github.io/angular2-graphql-note/ GraphQLのServer側、実装したことありますか？ var schema = new graphql.GraphQLSchema({ query: new graphql.GraphQLObjectType({ name: 'Query', fields: { user:
Angular 2 コンポーネント指向の第一歩 // Speaker Deck
All slide content and descriptions are owned by their creators.
InversifyJSで学ぶDI(Dependency Injection) - Qiita
はじめに DIコンテナ自体は特に目新しい技術ではありません。JavaScript界隈ではAngularJS 1.xやRequireJS(AMD)等はそれ自体がDIの仕組みを内包したライブラリです。 しかし、これらのDIは若干無理やりな実装方法を取っていた感があります12。これはJavaScriptでメタデータやAOPを適切に扱う機能が不足していたことが背景にあると考えているのですが、ここ1, 2年で言語側の状況も変化してきています。 具体的にはTypeScript 1.5からDecoratorsがサポートされたり、ES 2015にてリフレクションの仕様が追加されたりと、よりスマートなDIコンテナを実装するための基盤が整いつつあります。 そこで今日はInversifyJSという軽量JavaScript DIコンテナについて触れるとともに、最新のDI事情を見ていきたいと思います。 Invers
Angular — Unit Testing recipes (v2+)
Keep reading to see the old versions of the testing API. The Jasmine section and custom matchers are still valid though. Angular was designed with testability in mind as its predecessor and it provides multiple options to support Unit Testing. In this article we will show you how to setup Jasmine and write some common unit tests for your Angular Applications. We will cover: Introducing Jasmine: ma
A Way for Happy Angular Days
TOPGATE, Inc. I 💖 Google / 🍺 / Anime TypeScript/Golang Angular2 Info https://ng2-info.github.io Agenda FAQ and Misunderstanding Angular 2 Fundamental Things to Learn Angular 2 FAQ and Misunderstanding the Fact Q. "AngularJS 2?" "Angular JS 2" "Angular" contains ... Framework library Browser/Web Worker/Electron/Native/... Server-side CLI ... "Angular" = Platform Q. "I MUST learn TypeScript?" yo
2016年もやってきたng-japan春のAngular祭り - パステル色な日々
自分がng-kyotoコミュニティに参加しているのもあって、はじめてng-japanに行ってきました。 心の師（たくさんいる）である @laco0416 さんの発表に刺激されたので早速アウトプットすることにします。 いろいろ学びはありましたが、一番心に残っているのは皆さん口をそろえて「TypeScriptの静的型付けはいいぞ。」といってたことじゃないですかね。 今はBabel一辺倒なんですがTypeScriptに戻りたくなりました。Babel始めた頃と状況も違いますからね。 セッションは2トラックに分かれていて40分のセッションを最大6つ受講できました。 全体的に長いセッションが多かったので聴講する側も疲弊していましたが、 それだけ濃い内容でした。Angularの未来は明るいと感じましたよ。 発表は当日配信されていたみたいなんですけど、あとからでも見れるんですかね……？ まあとにかく学ぶこ
20160305 フロントエンドカンファレンスのメモ - Qiita
すごく良かった！！ まとめると TypeScript, Angular2, BEM, Sass, gulp 使って開発しろっていうカンファレンスでした。 Are you a Designer or an Engineer? twitter.com/yamasy1549 http://yamasy.info NIT, Akashi College 2nd grade 17歳 スライド http://www.slideshare.net/yamasy1549s/are-you-a-designer-or-an-engineer ハッカソンに参加 はじめはコード書けなかったので発表資料とか作っていた。イラレに詳しくなった ランディングページとか作るようになった rubygirlに参加 インターンでお仕事でコード書くようになって人に見られるコードを意識するようになった はじめはjQueryとか今は
React/Redux苦労話 2015 - Qiita
この記事は、React.js Advent Calendar 2015の24日目の記事であり、 8月よりReactとReduxで既存システムの置き換えを行った、私の苦労話です。 簡単に対象のシステムを紹介するとこんな感じです。 約50機能のシステム PCブラウザで見ることが前提 サーバサイドも置き換えをする(実装言語はGo) フロントもサーバサイドも自分がやる この記事には以下の内容は含まれません。 Reactの使い方 Reduxの使い方 すごくかっこいいこと それでは全ての始まった8月より始めます。 8月 その前にReact/Reduxを選んだわけ みなさんご存知の通り、React以外にも、UI向けのライブラリはいくつかあります。今回もReact以外にAngularJS、Angular2、Mithril、Riotが候補に上がっていました。 しかしAngularJSはAngular2が発表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular 2 を利用した開発の実際
Angular2で階層的DIを使う - Qiita
