Angularで大規模開発に取り組み始めた話西田雅博 株式会社Bizreach HRMOS採用管理 Angular 4, Play Framework (Scala) React/Redux
ちいさく始めて、おおきく育てる。 週1時間からはじめるデザインシステム構築 - Assured Tech Blog
こんにちは、デザイナーの長尾です。2024年の8月からAssuredにジョインし、プロダクトデザインを担当しています。今回は、その一環として取り組んでいるデザインシステム構築についてお話しします。 着手した当初は「何をすべきか」「どこまでやるべきか」が分からず、手探りで進めていました。また、プロダクトの開発タスクと並行で行うため、デザインシステムに費やす時間をなかなか捻出できないという課題感もありました。 ですが、以下のようなことを大切にしながら、すこしずつ形になってきたので、振り返りを兼ねてこれまでのプロセスをまとめてみます。これからデザインシステムを始めようという方の参考になれば幸いです。 ゴールを描いて、バックキャスティングする 将来どうなっていたいか、の認識を揃えてからステップにおこす 現状を整理し、MVPを決める 現状を整理して、必要最低限の範囲からはじめる ちいさな改善をつみあ
angular.io Guide: Dynamic Component Loader - Qiita
これは、Angular の公式ドキュメントの Dynamic Component Loader の章 を意訳したものです｡ 駆け足で翻訳したので至らない点もありますが、あしからずご了承を｡ バージョン 4.2.6 のドキュメントをベースにしています｡ Dynamic Component Loader コンポーネントテンプレートは常に固定されている訳ではありません。アプリケーションは、実行時に新しいコンポーネントをロードする必要があります｡ このクックブックでは、ComponentFactoryResolver を使用してコンポーネントを動的に追加する方法を説明します。 このクックブックのコードの ライブサンプル/サンプルをダウンロードで、確認できます｡ Dynamic component loading 次の例は、動的広告バナーを作成する方法を示しています。 ヒーローエージェンシーは、いく
@ngrx/storeと@ngrx/effectsの使い方 - Qiita
NgRx v9に対応しました NgRxはAngularアプリケーション用の状態管理ライブラリです。 本記事では、簡単なサンプルを通して@ngrx/storeと@ngrx/effectsの使い方を紹介します。 ※ サンプルはNgRx v9系で書かれています この記事の対象者 Angularを利用している方 Angular + RxJSで状態管理をしたい方 NgRxを触ってみたい方 TL;DR NgRxはいいぞ。 https://stackblitz.com/edit/ngrx-todo-v9 NgRxの概要 NgRxはAngular用の状態管理ライブラリです。NgRxを利用するとAngularを利用したアプリケーションでReduxのような状態管理ができます。 NgRxは下図のような構成になっており、Reduxと非常によく似ています。 https://ngrx.io/guide/store よ
Angular中〜大規模アプリ設計 // Speaker Deck
All slide content and descriptions are owned by their creators.
Onsen UI Advent Calendar 2016 - Qiita
Android/iOS の UI を HTML5 で再現できる UI ライブラリ Onsen UI のアドベントカレンダーです！ https://github.com/OnsenUI/OnsenUI https://ja.onsen.io/ 元々は海外向けに提供していた OSS で、海外でのみ知名度があるという状況でしたが、 最近国内でも利用者が増えてきたのでアドベントカレンダーを用意してみました（2016/11/30 に急遽作成）。 Onsen UI を使って作ったサイト・アプリの紹介 Onsen UI を使う際に苦労したこと Onsen UI と React, Angular, Vue.js の相性の分析 Onsen UI と他の CSS フレームワーク・UI フレームワークとの比較 Onsen UI チームに言いたいこと などなど、Onsen UI に関係することなら何でもOKです。
Angular パフォーマンスアップ最短最速マニュアル - Qiita
動機 Angular(2 or 4)で開発中のプロダクト(SPA)が重い JS の肥大化 起動が遅い パフォーマンスチューンしたい で、みんないろいろ調べると思うけど… AOT コンパイルとか module の最適化とか手段はいろいろあるのはわかった が、ブログエントリを読んで今開発中のプロダクトに自分で解決策を注入するのが大変 サマリ 対工数効果が高い部分に絞ってパフォーマンスチューンできる、「これさえやればOK！」みたいな進研ゼミ的マニュアルを作った(半ば覚え書きだけど) 平均起動時間1は84%減 4000msec超 -> 640ms2 JS ファイルサイズ3は23%減 2770kb -> 2153kb (Parsed Size) 最適化後の Gziped Size は 393.47kb 前提 この記事は、AngularClass/angular-starter を使ったプロダクトで実
Angular 画面遷移
今回はAngularのRouterを使って画面遷移をやります。ログイン画面からメニュー画面に遷移するサンプルをやります。 名前とパスワードが等しければログインOKでメニュー画面に遷移します。いきなりメニュー画面に アクセスできてしまうので、実際のログイン認証とは程遠いのですが、あくまでも画面遷移のサンプルとして見て下さい。 Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。 プロジェクト作成 Angular CLIでプロジェクトとログインとメニューのコンポーネントを作成します。 プロジェクト作成時は--routingオプションを付けて下さい。 ng new プロジェクト名 --routing cd プロジェクト名 ng generate component login ng generate component menu ng generate
angular.io Guide: Reactive Forms - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は、Angular の公式ドキュメントのReactive Formsの章を意訳したものです｡所々抜け落ち、翻訳モレがありますがあしからずご了承を｡ バージョン 4.3.2 のドキュメントをベースにしています｡ Reactive Forms リアクティブフォームは、Reactive スタイルでフォームを作成するためのAngularのテクニックです。 このガイドでは、リアクティブフォームを用いて「Heroの詳細編集」フォームを作る手順を説明していきます｡ Reactive Formsライブサンプル/ダウンロードサンプルを試してみてく
Add option to $watch to prevent recursive firing · Issue #834 · angular/angular.js
When watching an object, if I make changes to the object from within the callback, this will trigger the $watch to be fired again after it's completion. This can occasionally cause recursive loops or redundant firing of the same $watch un-necessarily. It would be nice if we could pass an option (or imploy it by default) a way to ignore this. Other $watches can be fired, but the same $watch should
手っ取り早く Angularするなら Angular CLI (Angular Material も添えて) | バシャログ。
どうもfujiharaです。 この時期の気候は個人的には一番すきです。 前回に引続き手っ取り早くシリーズ第2段は Angular です。 (第一回目は手っ取り早くReactするなら Create React App) 前置きは置いといてサクッといきます。 Angularでの開発にあたり、コンパイルに必要なモジュールのインストール等初期ファイルを追加して コンパイルするまでが凄く大変です。これも Create React App と同様そこら辺すっとばせます。 Angular インストール〜起動（開発） #インストール npm install -g @angular/cli #開発ディレクトリ作成 ng new first-angular (↑ 必要なモジュールインストールするので時間がすこしかかります。） #開発ディレクトリに移動 cd first-angular #起動（開発） ng s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Preferred AngularJS Communication Patterns - codelord.net
[Tabs] Add ability to disable animations · Issue #2706 · angular/components![[Tabs] Add ability to disable animations · Issue #2706 · angular/components](https://cdn-ak-scissors.b.st-hatena.com/image/square/4c636efc4a765ea18510cd75aebcdf019909259b/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fa28ace120ba238123fff4ec0df2565ceaa0378bc7cc38be707eee2ca5d99ed26%2Fangular%2Fcomponents%2Fissues%2F2706)
Microsoft Word - Technical design for AngularJS-apps in UML.docx
ng-japan meetup evolution of Angular Compiler
Angular+Auth0の話
超速で非同期処理のキャンセルを組み込む with Rx - Qiita
サーバレスアーキテクチャ + SPAで SSRなしのSEO対策した話
これからはじめるAngular -HTML5 Conference 2017-
これからはじめるAngular
