angular2를 IntelliJ에서 개발하려할 때 typescript compiler error가 나는 경우.

;가 빠졌다는니 하는 에러가 났음.

typescript compiler의 version mismatch로 나는 case임.

IntelliJ에서 bundle로 제공하는 node compiler가 아니라 project에서 사용하는 node의 lib directory를 지정해주면 됨.

Languages & Frameworks > Typescript >> Node interpreter > Compiler version -> custom

ex) /Users/xxxx/sandbox/javascript/angular2-quickstart/node_modules/typescript/lib

Angular2 Project Quickstart – 6. Build and run the application

상기 command를 실행하면 두개의 병렬 node process가 수행된다.

  • typescript compiler in watch mode.
  • browser에 index.html을 load하고 변경이 발생되면 refresh 시키는 lite-server라 불리는 static file server

좀 지나면 browser tab은 화면을 보여줄 것이다.

이후에 app/app.component.ts에서 문구를 수정하면 이 변경을 lite-server가 감지해 TypeScript를 JavaScript로 recompile하고 browser를 refresh해 수정된 문구를 보여줄 것이다.

Angular2 Project Quickstart – Step 5: Define the web page that hosts the application

root folder에 index.html을 만들어보자.

위 코드에서 주목할 만한 부분은 아래와 같다.

  • Javascript libraries : core-js 부분은 older browser를 위한 것이고, zone.js, reflect-metadata는 Angular에서 사용되며 module loading을 위한 SystemJS가 있다.
  • Configuration file for SystemJS, main에서 참조하는 app module을 import해서 구동하는 script file
  • <body>안의 <my-app> tag는 app이 실제로 구동되는 영역이다.

몇가지 스타일을 넣어보자

index.html에서 사용하는 styles.css를 아래와 같이 작성해보자.

 

Angular2 Project Quickstart – 4. Start up your application

application을 시작하기 위해 app/main.ts를 아래와 같이 만들어 보자.

이 코드는 application이 구동될 platform을 초기화하고 AppModule을 bootstrap하기 위해 사용하는 코드이다.

그런데 왜 main.ts, app module, app component file들을 분리했을까?

App bootstrapping은 module을 생성하는 것과 view를 보여주는 것의 관심사를 분리한다.

이것은 전체 application을 실행하지 않을때 component Test를 쉽게 해준다.

Bootstrapping은 Platform-specific하다. 

Quickstart에서는 browser에서 직접 실행할 것이기 때문에 main.ts에서 platformBrowserDynamic function을 import했지만, mobile device에서는 Apache Cordova나 NativeScript를 load해야 한다.

Angular2 Project Quickstart – 3. Create a component and add it to your application

모든 Angular applicaiton은 반드시 AppComponent라는 root component를 가진다.

Component는 Angular application의 기본 code 블록으로 이것은 template에서의 screen 위치를 제어한다.

app/app.component.ts 파일을 아래와 같이 만들어 보자.

Quickstart application은 다른 component들과 같이 필수 structure를 가지고 있다.

  • import statement : 이 구문은 Angular core @Component decorator function을 접근할 수 있게 해준다.
  • @Component decorator : AppComponent class의 metadata와 관계있다.
    • selector : component에 대응되는 HTML element를 가리키는 간단한 CSS selector를 정의한다.
    • template : Angular가 component view에 rendering할 내용을 적는다.
  • component class : template에서 보여지는 view의 모습과 행동을 제어하는 것으로 여기에서는 root component인 AppComponent만 있다.

새로운 AppComponent를 import하기위해 app.module.ts를 고치고 declarations와 bootstrap fields를 NgModule decorator에 추가하자.

 

Angular2 – NGMODULE

Angular Module은 application을 기능의 응집된 블록으로 조직화하는 것을 도와준다.

Angular Module은 @NgModule decorator function으로 장식된 class다.

@NgModule은 metadata object로 어떻게 compile하고 구동하는지 알려준다.

이는 module의 components, directives, pipes등을 식별하기도 하고 service provider를 application dependency injector들에 추가하기도 한다. 기타 여러가지 옵션들이 있다.

자세한 내용은 아래 링크에서..

https://angular.io/docs/ts/latest/guide/ngmodule.html

Angular2 Project Quickstart – 2. Create application

Angular application을 NgModules의 기능에 연계하여 밀접히 작성하게 된다.

Angular는 Angular Module들로 분리된다.

이를 통해 angular는 어플리케이션이 필요한만큼 payload size를 작게 유지하게 해준다.

모든 Angular application은 적어도 AppModule 하나는 있어야 한다.

이것은 application entry point로 quick start application은 browser에서 동작하니 root module은@angular/platform-browser의 BrowserModule을 imports array에 넣어줘야 한다.

root directory에 app subfolder를 만들고 app.module.ts를 만들어보자.

여기까지가 브라우저에서 동작하는 최소한의 Angular Application이다.

실제 application에서는 FormsModule, RouterModule, HttpModule을 써야 할 것이지만, 이 챕터에서는 여기까지만…

Angular2 Project Quickstart – 1. Create & Configure

https://angular.io/docs/ts/latest/quickstart.html#!#prereq

전형적인 Angular2 Project가 필요한 configuration file들

package.json : identifies npm package dependencies for the project.

tsconfig.json : defines how the TypeScript compiler generates JavaScript from the project’s files.

typings.json : provides additional definition files for libraries that the TypeScript compiler doesn’t natively recognize.

systemjs.config.js : provides information to a module loader about where to find application modules, and registers all the necessary packages. It also contains other packages that will be needed by later documentation examples.

상기 파일들이 정의되고 나면 아래 command를 수행해 package.json의 package를 설치한다.

만약 typings folder가 보이지 않으면 아래처럼 개별 설치하면 된다.

 

어느 자바개발자의 Angular2 적용기

https://hackernoon.com/why-learning-angular-2-was-excruciating-d50dc28acc8a#.k9mx4u9g7

Java Engineer였던 필자가 Angular2를 이용하면서 느낀 점을 적은 블로그입니다.
Angular2 release 과정에서 매번 minor release 때마다 수많은 변경들이 일어나서 매번 “5 Minute Quick Start”를 다시 봐야 했고, 자바스크립트에 익숙하지 않은 자바개발자에게는 너무 고통스러운 과정이었다고 하네요.

angular-material 적용을 하면서 에러가 나는데 도움될만한 에러메시지조차 없어 엄청 헤맸다는 내용도 있고…
수많은 의존 라이브러리들도 수시로 minor version을 바꾸면서 깨지고 있는데다 Stackoverflow는 6주만 지나면 무용지물이고…

정식 release가 되었다고 해도 이 상황은 해소될 것 같지 않으니 힘들다라는 내용.

Javascript 생태계가 빠르게 성장하고 있다지만, Tool도 제대로 동작하지 않고 혼란스러운 상태에 빠져 수많은 시간을 버리고 생산성을 깍아먹으니 못써먹겠다는 평…

Firebase를 사용하지 말아야할 이유들

9개월간 production에서 firebase를 사용한 곳에서 쓴 블로그 내용을 요약해봤습니다.
https://crisp.im/blog/why-you-should-never-use-firebase-realtime-database/

Crisp은 live chat을 서비스하는 회사.
Socket.IO를 백엔드에 사용하고 Firebase를 dashboard로 사용해 비용효율적으로 만들고자 함. 백엔드에서는 AMQP로 싱크함.

3주만에 hybrid architecture를 이용해 MVP를 만듬.
MVP를 이용하니 정말 빠르게 제품을 만들어 시장에 낼 수 있었음.

그런데… 폭풍이…
crisp이 ProductHunt에 나와 scale issue가 발생함.
자산이 커지자 firebase로 무언가를 만드는 것이 아주 느려짐.
새로운 feature들을 만드는데 새로 만들때 보다 2배정도 시간이 걸림.

Firebase의 기술적 limit도 발견함. 매달 100GB+ Firebase traffic이 되자 성능이슈가 발생됨.

옮긴 10가지 이유

  • 스파게티 코드
    Server-less는 code-less가 아님.
    Firebase는 모든 서버 로직이 web이나 mobile client에 있다는 것을 의미함.
  • Firebase와 micro-service와 integrating하는 것은 불지옥임
    Crisp은 micro-services를 사용하고 있음.
    backend에서 Firebase query를 날리는 것은 매우 느리기 때문에 피해야 한다.
    micro-service가 back-forth sync를 하는데 Firebase NodeJS lib를 사용했더니 unused reference를 release 안하는지 메모리 이슈가 생기더라.
  • 가격
    Server-less가 cost-less가 아님.
    여러분이 게을렀던 것에 댓가를 나중에 지불하게 됨.
  • Firebase는 load할때 모든 subtree를 download함.
    Slack같은 앱을 만든다고 생각하면 모든 channel data를 app load시에 download 받게 된다고 생각하면 됨.
    어떤 사람들은 pagination으로 개선할 수 있다고 하는데 Firebase에서는 그런거 할수 엄슴.
  • 불일치
    Firebase는 offline operation을 지원함.
    git commit처럼 생각하면 되는데 문제는 client가 offline이었다가 online이 되면서 동시에 input data가 발생하면 conflict나서 불일치 문제가 생김.
  • data migration
    simple SQL DB, ORM, ODM에 Firebase data migration하는 것이 쉽지 않음.
  • Relations 문제
    NoSQL이다 보니 Relation을 다루는 것은 아주 지옥임.
    아주 간단한 예로 아래와 같은데…
    user는 team_ids를 봐야하고 team은 user_ids를 봐야 함.
    간단해서 그런데 더 복잡해지면 Hell됨.
  • Queues가 버그가 많음.
    server code와 micro-services를 다루다 보니 공유작업을 위해 queue를 사용함.
    firebase-queues라는 NodeJS lib.를 이용함.
    그런데 이게 Firebase team에서 제대로 관리 안하는지 sync문제를 포함해 버그투성이임.
    queue가 scale bottleneck이라 insert는 빨리되는데 소비가 매우느린다던지 하는 문제가 생김. 이게 심각해지는 것은 client들이 많아져서 input이 많아지면 처리가 지연되어 나중에 서비스에서 사용할 수 없을정도로 느려짐.
  • 니가 니 데이터를 가질 수 없음.
    data, email, user account를 export할수도 없고 복구 할수도 없음. ㅠ.ㅠ
    data를 export하기 위해서는 firebase에 이메일을 보내야 함.
  • 복잡한 쿼리따윈 할수엄슴.
    slack을 다시 예로 들면 unread message만 갯수 세기같은건 structure에 read=tag 따위를 넣어도 할수없음.
    active user를 얻기 위한 쿼리도 할 수 없고 특정 field들을 가진 document를 update하는 batch operation도 할 수 없음.

 

Bonus. 당신의 Product를 위한 API를 만들고 싶다면? 할수엄슴.
developer API를 제공하고 싶어도 그런거 할수엄슴.