Ionic 2 대 Ionic 1: 성능 향상, 새로운 도구 및 큰 발전

Ionic 프로젝트는 빠르게 인기를 얻고 있습니다. GitHub에 27,000개 이상의 별이 있는 이 프로젝트는 전 세계적으로 가장 인기 있는 50대 오픈 소스 프로젝트 중 하나로 부상했습니다.

그리고 최근 Ionic 2의 안정적인 버전이 발표되었으므로 엔지니어들이 Ionic 2와 Ionic 1의 차이점을 분석하고 이해하기에 완벽한 시기입니다.

높은 수준에서 Ionic 2는 Angular >= 2.x로 Ionic 1 프로젝트를 완전히 재작성한 것입니다. Ionic 1을 사용한 2년 이상의 경험에서 이것이 실용적인 측면에서 의미하는 바는 다음과 같습니다.

향상된 변경 감지 성능

Ionic 1은 Angular 1.x를 기반으로 하고 Ionic 2는 Angular >= 2.x를 기반으로 합니다. Angular >= 2.x만 사용하여 얻을 수 있는 성능 향상은 상당합니다.

Angular 1.x에서 성능이 뛰어난 애플리케이션을 얻으려면 $watch , 일회성 바인딩 등과 같은 깊은 프레임워크 지식이 필요했습니다. Angular >= 2.,x 응용 프로그램은 기본적으로 성능이 매우 뛰어납니다.

Angular의 새 버전은 유명하고 비판적인 다이제스트 주기(모든 변경 시 앱의 모든 변수 추적 및 테스트)를 삭제했습니다. 대신 Angular >= 2.x는 Zone.js를 사용하여 애플리케이션 변경 사항(동기 및 비동기 모두)을 추적합니다.

Angular >= 2.x의 변경 감지는 내부에서 작동하는 방식을 이해하기 위해 탐색할 가치가 있습니다. Angular >= 2.x에서 변경 감지는 항상 위에서 아래로 수행됩니다. 애플리케이션의 성능을 제어하려면 고유한 구성 요소에서 올바른 변경 감지 전략( OnPush 또는 Default )을 사용하는 것이 가장 중요합니다.

모든 Ionic 2 구성 요소는 OnPush 전략을 사용합니다. 즉, 변경 감지가 항상 수행되는 것이 아니라 입력이 변경될 때만 수행됩니다. 이 전략은 또한 구성 요소의 하위 트리가 불필요하게 렌더링되는 것을 방지합니다. 기본적으로 이미 최적화되어 있습니다.

성능이 뛰어난 Ionic1 애플리케이션을 얻는 방법에 대해 더 알고 싶다면 이 Ultimate AngularJS 및 Ionic 성능 치트 시트를 읽는 것이 좋습니다.

더 빠른 DOM 성능

Angular DOM(문서 개체 모델) 조작이 많이 발전했습니다. 반응형 UI(사용자 인터페이스)를 원하면 DOM 조작과 JavaScript 성능이 중요합니다.

예를 들어, 테이블에 1,000개의 행을 생성하는 데 바닐라 JavaScript에서는 126밀리초, Angular에서는 110% 더 많은(264ms) 시간이 걸립니다. 1.x, 그리고 Angular >= 2일 때 40% 이상(177ms). 보시다시피, Angular >= 2.x의 성능은 Angular 1.x보다 낫고 React 성능과 비슷합니다.

Ionic 2는 다시 한 번 이 성능 업그레이드의 이점을 누리며 "무료"입니다.

새로운 웹 애니메이션 API

Ionic 1 및 Ionic 2는 여전히 내부 전환 및 애니메이션을 위해 CSS 애니메이션에 의존하지만 Ionic 2는 Angular >= 2.x를 기반으로 하므로 개발자는 Angular 애니메이션 시스템을 통해 새로운 W3C(웹 애니메이션) API에 액세스할 수 있습니다.

Web Animations API는 개발자에게 브라우저의 애니메이션 엔진에 대한 액세스를 제공하는 JavaScript API입니다. 아직 모든 브라우저에서 지원되지는 않지만 폴리필을 사용하면 지금 바로 사용할 수 있으며 웹에 애니메이션을 적용하는 가장 성능 있고 유망한 방법 중 하나를 즐길 수 있습니다.

원천

Angular >= 2.x 애니메이션 API를 사용하면 복잡한 애니메이션(다른 상태 또는 그룹 애니메이션에서 시작 및 종료)을 쉽게 설명할 수 있으며 콜백을 통해 애니메이션 수명 주기에 액세스할 수 있습니다.

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

내장 네이티브 스크롤링

기본 스크롤을 통해 Ionic 2는 지원되는 WebView에서 스크롤 이벤트를 수신할 수 있습니다. 그것은 만든다
Pull to Refresh , List Reordering 또는 Infinite Scroll 은 해당 이벤트를 에뮬레이트하지 않고도 가능합니다(JavaScript 스크롤).

지금까지는 JavaScript 스크롤이 필요했지만 Chromium(Android) 및 WKWebView(iOS) WebView가 발전하여 이제 기본 스크롤을 지원합니다. Ionic 1(2015년 12월 이후)이 설치된 Android에서만 기본적으로 활성화되고 Ionic 2가 설치된 모든 플랫폼에서 활성화됩니다.

기본 스크롤 지원은 비동기 이벤트 덕분에 부드러운 스크롤을 보장함으로써 더 나은 성능을 제공하고 사용자 경험을 개선합니다.

향상된 구성 요소 API

Ionic 2를 사용하면 Ionic 1을 유명하게 만든 모든 구성 요소에 액세스할 수 있지만 이제는 Angular >= 2.x를 기반으로 개선되었습니다. 다음은 가장 일반적인 구성 요소 목록입니다.

• 단추
• 카드
• 상
• 목록
• 메뉴
• 모달
• 도구 모음

구성 요소 API는 Ionic 1과 Ionic 2 사이에서 약간 변경되었습니다. 예를 들어 Ionic 1 ion-spinner 구성 요소는 스피너 유형에 icon 속성을 사용합니다.

 <ion-spinner icon="bubbles"></ion-spinner>

Ionic 2는 name 속성을 사용하는 반면:

 <ion-spinner name="bubbles"></ion-spinner>

보시다시피 Ionic 1 구성 요소 API에 익숙하다면 Ionic 2 구성 요소도 편안하게 사용할 수 있습니다. 이러한 차이점만 알고 있으면 됩니다.

인상적인 구성 요소 목록을 통해 Ionic 1으로 할 수 있는 모든 작업을 Ionic 2에서 할 수 있으며 그 이상도 가능합니다.

웹 워커 소개

웹 작업자를 사용하면 애플리케이션이 백그라운드 JavaScript 스레드에서 스크립트를 실행할 수 있습니다. 작업자는 애플리케이션 컨텍스트 외부에서(즉, 사용자 인터페이스를 방해하지 않고) 지루한 작업과 HTTP 요청을 수행할 수 있습니다. 오늘날 웹 작업자는 모든 주요 브라우저에서 지원됩니다.

전통적으로 모든 프레임워크는 window 및 document 개체 위에 구축되었으며 이에 의존했습니다. 그러나 작업자에서는 둘 다 사용할 수 없습니다. renderer 를 분리한 새로운 Angular >=2 아키텍처를 사용하면 웹 작업자(또는 해당 문제에 대한 다른 플랫폼) 내에서 애플리케이션을 실행하는 것이 더 쉬워집니다.

Ionic 2는 새로운 ion-img 구성 요소와 함께 웹 작업자 사용을 실험하기 시작했습니다. 현재 ion-img 는 VirtualScroll 목록 내에서만 사용할 수 있습니다. 이미지 HTTP 호출을 웹 작업자에게 위임하고 지연 로드도 지원합니다(즉, 뷰포트에서 이미지만 검색 및 렌더링). 이제 웹 애플리케이션은 UI에만 집중하고 나머지는 작업자가 수행할 수 있습니다.

사용 방법의 예는 다음과 같습니다.

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

이것은 시작에 불과하며 가까운 장래에 더 많은 사용 또는 웹 작업자가 나타날 것으로 예상합니다.

TypeScript의 장점

Ionic 2를 사용해 왔다면 TypeScript를 사용하고 있다는 것을 이미 알고 있을 것입니다. TypeScript는 일반 JavaScript로 컴파일되는 JavaScript ES2015의 상위 집합입니다. TypeScript를 사용하면 인터페이스, 믹스인 등의 고유한 모든 기능과 ES2015 기능(화살표 함수, 생성기, 여러 줄 문자열 등)에 액세스할 수 있습니다.

미국 대통령의 이름을 표시하는 Angular >= 2.x 구성 요소의 예를 살펴보겠습니다.

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

우리는 대통령 개체 모양을 설명하는 인터페이스( IPresident )를 사용합니다. 특히 프로젝트에 여러 개발자가 있는 경우 조작하는 내용을 설명하는 인터페이스가 있다는 것은 흥미로운 일입니다. 실수를 하고 예를 들어 회장 이름에 boolean 을 사용하면 IDE는 컴파일이 일어나기 전에도 뭔가 잘못되었다고 알려줄 것입니다.

사용하는 거의 모든 IDE(Visual Studio Code, Atom, WebStorm 등)에서 자동 완성, 유형 검사 및 린터를 활성화하는 플러그인을 찾을 수 있습니다.

TypeScript는 코드를 더 이해하기 쉽게 만들고 유형 실수를 피하고 생산성을 높이는 데 도움이 되기 때문에 Ionic 2의 진정한 이점입니다(자동 완성, 모듈 자동 가져오기, 호버 시 도구 설명 정의 및 CTRL + Click 을 통해 정의로 이동).

모든 새로운 CLI v2

Ionic CLI v2는 명령줄을 통해 직접 페이지, 구성 요소, 파이프 및 지시문을 생성하는 방법을 추가합니다.

예를 들어 MyPage 라는 새 페이지를 만들려면 다음 명령을 실행할 수 있습니다.

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

이 명령은 규칙을 따르고 세 개의 파일을 만듭니다.

템플릿용 HTML 파일입니다. 구성 요소 스타일에 대한 SASS 파일입니다. 구성 요소 논리에 대한 TypeScript 파일입니다.

생성된 my-page.ts 파일은 다음과 같습니다.

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

CLI를 사용하여 규칙을 적용하는 것은 팀에서 작업할 때 유용합니다. Angular 2.x와 Ionic 2는 Angular 앱 아키텍처가 무엇인지 더 잘 이해할 수 있도록 돕는 데 큰 역할을 하고 있습니다. 물론 원하는 경우 관례에서 벗어날 수 있습니다.

개선된 포장

Ionic 1은 Gulp 에코시스템을 사용하여 애플리케이션을 번들로 제공하는 반면 Ionic 2를 사용하면 좋아하는 도구를 선택할 수 있습니다. Ionic 2는 ionic-app-scripts라는 별도의 프로젝트로 자체 도구 모음을 제공합니다.

ionic-app-scripts 는 개발자가 패키징 구성에 대해 전혀 걱정할 필요가 없다는 아이디어를 기반으로 합니다. 프로젝트가 Ionic 2에서 갖게 되는 유일한 패키징 관련 종속성은 @ionic/app-scripts 입니다. 기본적으로 Webpack을 사용하지만 롤업을 사용할 수도 있습니다.

Ionic 2 및 CLI v2에서는 assets 및 TypeScript 파일이 동일한 src 폴더에 있습니다. www 는 이제 모든 빌드 중에 생성되므로 버전 제어 추적에서 제거해야 합니다.

오류 보고 도구 소개

새로운 CLI는 또한 훌륭한 오류 보고 도구를 도입했습니다. 그것을 얻으려면 Ionic 버전 >= 2.1을 설치해야 합니다.

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

이제 오류가 발생할 때마다 이에 대한 의미 있는 정보가 포함된 모달이 나타납니다. 예를 들어:

개발 중에 가능한 한 빨리 런타임 오류에 대한 알림을 받는 것은 매우 중요하며 Ionic 2는 이와 관련하여 훌륭한 작업을 수행했습니다.

AoT(Ahead of Time Compilation)의 이점

AoT(Ahead of Time Compilation)는 Angular 생태계의 작은 혁명입니다. Angular 2.x와 함께 도입된 AoT를 사용하면 브라우저에서 즉석에서 컴파일하는 대신 빌드 단계에서 템플릿을 미리 컴파일할 수 있습니다.

이것이 큰 차이처럼 보이지 않을 수도 있지만 실제로는 그렇습니다. AoT를 사용하면 템플릿 컴파일러를 애플리케이션과 함께 제공할 필요가 없습니다. 이것은 두 가지 장점이 있습니다. 첫째, 번들이 더 작아지므로 네트워크에 직접적인 영향을 미치므로 애플리케이션을 더 빠르게 다운로드할 수 있습니다. 둘째, 템플릿 컴파일이 더 이상 필요하지 않기 때문에 앱이 더 빠르게 부트스트랩됩니다.

Ionic 2는 Angular 2.x AoT를 최대한 활용하여 무료로 애플리케이션의 크기와 로딩 시간을 최적화합니다.

Ionic 2는 엄청난 발전입니다

전반적으로 Ionic 2는 하이브리드 모바일 산업을 위한 큰 진전입니다. Ionic 2 구성 요소 세트는 Ionic 1 구성 요소와 유사하지만 Ionic 2는 많은 도구와 성능 향상을 제공합니다.

실제로 TypeScript, ionic-app-scripts 및 Ionic CLI와 같은 도구를 사용하여 Ionic 2 개발자는 생산성을 높이고 유지 관리 가능한 코드를 생성할 수 있으며 런타임 오류가 발생하는 즉시 경고를 받을 수 있습니다.

또한 Ionic 2는 특히 병목 현상(변경 감지, 애니메이션, 로드 시간 등과 관련된)을 제거하거나 줄임으로써 Ionic 1에 비해 성능을 무료로 향상시킵니다.

Ionic 2를 사용하면 응용 프로그램이 그 어느 때보다 기본적으로 느껴집니다. 회전을 위해 꺼내십시오. 당신은 기뻐할 것입니다.