이 기사는 Silbird Advent Calendar 2017의 12 일째 기사입니다.

소개

2017/8월에 ASP.NET Core2가 출시되었고 2017/11월에는 Angular5가 출시되었습니다! 올해는 C#과 ASP.NET에 신세를 낸 해였습니다. 비망록도 겸해, 환경 구축사 시작 기사를 쓰고 싶습니다. 다음에, Chrome60(2017/7월 하순 무렵)부터 Audits에 Lighthouse가 짜넣어졌으므로, 타이틀과는 전혀 관계 없습니다만 시험하고 싶기 때문에 시험합니다!

ASP.NET + Angular

릴리스 노트 / 변경 로그

ASP.NET:
htps : // 기주 b. 코 m / 아 sp ne t / 칭찬 / 레아 아세 s

Angular:
htps : // 기주 b. 코 m/앙구ぁr/앙구ぁr/bぉb/마s테 r/짱게ぉG. md
htps : // 메이 m. 코 m / angu r-a-pan-use r-g low p / ぇr shion - 5-0-0-f-angu r-w-a-a-b-9746-f966c7d

개발 환경

macOS Sierra 10.12.6

Visual Studio for Mac

노드 v9.2.1

dotnet 2.1.2

환경 구축

1. 템플릿 설치dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

아래 템플릿도 준비되어 있는 모양
- Aurelia
- Knockout.js
- Vue.js
- React.js

2.Angular에 대한 솔루션을 생성/필요한 패키지를 떨어뜨려dotnet new angularnpm installdotnet restore

3. 실행dotnet runVS에서 디버깅을 실행하더라도 마찬가지로 시작할 수 있습니다.

파일 구성

ClientApp 아래에 구성 요소가 설치됩니다.
Karma/Jasmine과 같은 단위 테스트 라이브러리도 기본적으로 들어있었습니다.

Mac의 경우, package.json을 확인하면, Angular4계가 되어 있었으므로, 이 상태로부터, 5계에 업데이트를 하는 경우는, 여기 (을)를 참고로 ,,).

Windows의 경우는, 「파일 -> 새로운 프로젝트」로부터, 검색을 걸면 템플릿이 히트하므로, 그곳으로부터 인스톨 할 수 있습니다.

Audits

Chrome60에서 Audits에 Lighthouse이 포함되었습니다. Lighthouse는 Google이 제공하는 웹사이트의 성능 측정 도구로, 그 이외에도 Progressive Web Apps(PWA)에의 준거나 접근성 대응의 측정 등도 할 수 있습니다. 원래는 Node.js에서 실행할 수 있는 도구로 Chrome 확장 프로그램으로 설치해야 했습니다.


이미지에서 PWA/성능/접근성/모범 사례의 4 가지 분류에서 점수를 표시합니다.

개인적으로는, DOM 트리나 CSSOM 트리의 관점에서, 크리티컬 렌더링 패스(유저 조작에 관련하는 컨텐츠 표시의 우선 순위 매김)나 렌더링 처리(FPS 처리 경감이나 GPU의 활용)를 의식하는 것이 많기 때문에, First Meaningful Paint(사용자에게 의미 있는 표시가 될 때까지)의 항목 주위가 신경이 쓰이는 곳이었습니다.

Audits/Lighthouse 참조:
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / ぇ b / 와 ls / ぃgh 쇼세 /

덤

참고

h tps : // s c ゔ ぇ rf ぉ w. 코 m / 쿠에 s Chion s / 44831899 / c Rea Chin g-o-ne w-angu rp roji ct-on-ma-c u th ゔ
h tp // w w. c 샤 rp r r. 코 m / r 치 c ぇ / 껄껄 gs r r d ぃ th 앙 ぁ r5 - an d a sp 네 t 이것 /