「どうしてAngularは流行らないのか」と言われて思うこと | Marginalia
最近に限らず、ここ数年ずっと目にするし、聞かれることもあるこの話について、いくつかの思うこと、ぼやきを書いておく。あとで参照できて便利なので。 1. あなたが使い始めれば少なくとも昨日よりは広まりますよ好きなら使えばいいと思うので僕には気持ちがわからないのだが、好き・気になるけど流行ってないから使わないという心理があるらしい。企業での判断ならわかるが、個人でそれはまったくわからん。仮にそれがマジョリティだとしたら、使われなければ流行らないのに流行らないと使われない、デッドロックで詰みです。 あなたが使ってみてそのことを発信すれば、少なくとも昨日より世界で一人分は使用者が増えます。その積み重ねでしか普及しません。ですので、流行って欲しいと思うならまず自分から使って周りに広めてください。 2. そもそも「流行っている」とは？僕が思うに、「流行っている」ということと「広く普及している」ということ
Angular v14 is now available!
photo by Emma TwerskyWe are excited to announce the release of Angular v14! From typed forms and standalone components to new primitives in the Angular CDK (component dev kit), we’re excited to share how each feature makes Angular more powerful. Since our last release, we completed two major requests for comments (RFC), which provided an opportunity for the entire Angular community to provide desi
Angularアプリケーションの状態管理パターン | Marginalia
Angularアプリケーションの状態管理の方法はさまざまな実装がありえるが、その中でも典型的ないくつかのパターンを、それがどのようなニーズがあって選ばれるのかという考察を踏まえながら列挙する。パターンとその特徴を例示するのであって、それぞれのパターンにおける最良の実装を示すものでもないし、これらのパターンに該当しない実装を否定するものでもない。 Standalone Componentsなど、Angularのメンタルモデルが変わっていく兆しを見せる今、これらをまとめておくことは諸々のAngularアプリケーションの状態管理のあり方を見直すきっかけになるのでないかと思う。特に、NgRxがデファクトスタンダードであり唯一の選択肢だと考えている人には、それが単にひとつの選択肢であることを思い出してもらえるのではないだろうか。 コンポーネントクラスによる直接の状態管理一番最初のパターンは、次の例の
AngularプロジェクトへJestを導入する | Marginalia
TL;DR npm i -D jest @types/jest jest-preset-angular rm karma.conf.js src/test.ts touch jest.config.js src/setup-jest.ts jest-preset-angular プリセットを jest.config.js から読み込む require('jest-preset-angular/ngcc-jest-processor'); module.exports = { preset: 'jest-preset-angular', setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'], };
Angular 8→9→10→11でビルド時間がどれくらい早くなっているかみてみよう！ - Qiita
ng serveでは、外部ライブラリをまとめるvendor.jsやstyle.jsが 9 → 10,11で半分近く削減されており全体のサイズで42%近く削減されている感じです。 nb buildは11だとビルド時間が少しだけ早くなっているような気がしますが、元々のコード数がそれほどでもないのもあり 1~2s位の差しかないものの、少しビルド時間が改善されてそうな雰囲気でした。 各バージョン毎のng buildの平均速度 バンドルファイルのサイズを可視化してみる 少し視点を変えて webpack-bundle-analyzer を利用してバンドルファイル内の容量を可視化して 何か気づけるポイントがないかざっくり確認してみます。 Angular8.2.14 Angular9.1.12 Angular9からivyなる単語が出てきました。 modules数も若干減っているようです。 Angular1
Angular と Firebase で月間 3.5億PV になった PWA の収益性改善とコストカット - Qiita
と、振り返ってみると毎年綺麗に 300% 成長でこれていますね。 （流石に来年はきついと思います＾＾； 今回は、そんな サービスを拡大する上で欠かせない収益の話 と 成長したからこそ表面化したコストの話 をまとめていきたいと思います。 収益の話 参照：https://jp.freepik.com PWA は稼げない 昨年の Advent Calendar にて、私はたいそう嘆いておりました（ＴДＴ） Web 側の広告は MPA（マルチページアプリ）を前提にしているものがほとんど Web 側では広告の表示を最適化できない（MPA 前提の規約上バックグラウンドで読み込んでおけない それに加えて、SPA のページ遷移が早すぎて広告が表示される前に通過してしまう アプリ側にはインタースティシャル広告やリワード広告といった単価の高い広告商材が豊富に存在する そういった要因から、PWA におけるページ
GitHub - scullyio/scully: The Static Site Generator for Angular apps
Scully pre-renders each page in your app to plain HTML & CSS. To do this, Scully uses guessjs to find all of the routes in your project. Scully then visits each route, rendering the view and saving it to an HTML file. You can then ship all of those HTML files to production. Each view in your app can now be delivered to your users in just a few KBs, as opposed to the hundreds/thousands of KBs requi
Angular Ivyでのテンプレート型チェック - notebook
ちょうどTypeScriptでstrict: trueやっていこう！という時期だったところに「AngularってTemplateTypeCheckできないんですね」 ということを言われて調べてみたところできなそうだったので落胆していたのですがIvyで実現されていたようです ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 8.1.1 Node:
Ivyが単体テストにもたらした恩恵 - Qiita
今年のAngularアドカレはテストの話題が豊富ですね。 Angular8 ユニットテストが動かねぇ！ や はじめてのユニットテストを書く前にモック実装で手が止まってしまわないために など、テストコードを書く上での知見が色々と紹介されています。 僕自身も3年前のアドカレで、Zone.jsがいかにAngularのテストに貢献しているかとかを書いたりしたことがあり、Angularの色々な機能の中でもテスト周りは特に好きな部分の1つだったります。 さて、Angularで直近ホットだった話題といえば、やはりIvyは外せません。 Ivy自体は基本的に内部構造の変更であるため、アプリケーションコードの書き方そのものに影響する話ではないですが、AoT(Ahead of Time)コンパイルをデフォルトにするための布石であり、バンドルサイズの削減やビルドプロセスがシンプルになる、といった効果については聞い
Angular8 ユニットテストが動かねぇ！ - Qiita
この記事は Angular #2 Advent Calendar 2019 二日目の記事です。 こんにちは。カルテットコミュニケーションズ で働いている @ringtail003 です。プロダクションコードがきちんと動作しているのにユニットテストが書けない、動かないって事ありませんか？そんなハマりポイントを記事にしてみました。 この記事を書いた環境： node v12.13 @angular/cli 8.3.12 ngOnChange 動かないんですけど？ サンプルコード https://github.com/ringtail003/angular-failed-test/tree/ng-on-changes コンポーネントクラスの ngOnChanges() でメンバ変数を更新しているケースです。 ブラウザでは ngOnChanges が実行されるのに、テスト環境では無言を貫き mess
Web フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由 - Qiita
Web フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由JavaScriptAngularフロントエンド 2019/12/04 追記 @okunokentaro さんが熱いアンサー記事を書いてくれました。 Angularでの開発を快適に進めるために知っておきたいこと https://qiita.com/okunokentaro/items/503ab7a4c7601b564de0 https://gist.github.com/okunokentaro/dc4cd470999fd90aba73423d09a37485 本当に本当にありがたいです。この短時間でこんな良質の記事が書けるのは本当にスゴイ。 Angular コミュニティの暖かさと熱さを感じる 1 日でした。この記事もぜひ参考にしてください。 （ただ、「A
Angularで「ネストされたルート」を実装する（シンプルな実装 / モジュール切り出し / 遅延ロード） #write_blog_every_week - こまぶろ
この記事は write-blog-every-week Advent Calendar 2018 11日目の記事です。 前日の記事は、nitt-san（@nitt_san）さんの「インプットからアウトプットへ -2017年〜2018年の自分を振り返る-」でした。 nitt-san.hatenablog.com Angular のルーティング機能を試したい 以前、Vue.jsを勉強していた際に、Vue Routerの「ネストされたルート」を扱う方法を試した。 ky-yk-d.hatenablog.com Vue.jsにおける「ネストされたルート」は、Vue Routerの公式ガイドにも記載されている名称だ。 ネストされたルート | Vue Router 実際のアプリケーションの UI では通常複数のレベルの階層的にネストしたコンポーネントで構成されます。ネストされたコンポーネントの特定の構造
ReactユーザーのためのAngular2ファーストステップ - Qiita
Reactはやったことある人向けに、ReactのアレはAngular2だとどうなってるの？というのをまとめていきます。Reactユーザーだった自分がAngular2始めるにあたりこういう情報あればなと思ってたやつです ところでAngular2じゃなくてAngularと呼んでね！とのことなので、以下Angularと呼びますがAngular 2.xを指します。 アプリケーションのブートストラップ React <!doctype html> <html lang="en"> <head> <title>React App</title> </head> <body> <div id="root"></div> </body> </html> import React from 'react'; import ReactDOM from 'react-dom'; class App extends
Angular2のDIを知る - Qiita
Injectする側 これをComponentでDIします。DIするにはComponentのprovidersプロパティにDIしたいクラスを指定し、コンストラクタでそのクラスの引数を取ります。 import {Component} from 'angular2/core' import FooService from "./fooService"; @Component({ selector: 'my-app', providers: [FooService], template: ` <div> <h2>Hello {{name}}</h2> </div> `, directives: [] }) export class App { constructor(private fooService: FooService) { this.name = fooService.say(); }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - urish/tsquery-playground: Playground for TSQuery
Taiga UI
Working with models in Angular
Install Angular Language server
Light and Dark: Creating two application themes with Clarity UI
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
