팀 세미나

1. Angular
1. What is Single Page Application?
Cloud Bu / Iw Jhun

2. Angular ..?

3. 우리가 하는 일
서비스 인터페이스 개발
• 플랫폼 인터페이스(API) 개발
• 콘텐츠 전송, 데이터 후처리 등..
서비스 GUI 개발
• 운영 Tool 개발

4. What Is Single Page App ?
아 저 Angluar 할 줄 알아요  요즘 Web App은 이렇더라구요..

5. Angular === Front Side Framework === SPA (Single Page App)
Unlimited scroll, Not document

6. Traditional Page Single Page Application
(https://msdn.microsoft.com/en-us/magazine/dn463786.aspx)

7. • 빠르고 효율적인 응답
• 서버는 코어 로직에 집중 (템플릿 파싱과 같은 부하가 없어짐)
• 클라이언트 리소스 이용 (클라이언트 렌더링)
• 다양한 클라이언트 디바이스 지원 용이 (IOS, Android, PC, Web ..)
…
서비스 관점에서의 이점
• 컴포넌트 기반의 단위 테스트
• 모듈 재활용
• 번들링 을 통한 리소스 관리
• 개발 영역 분리
…
개발 관점에서의 이점

8. 그럼 어떻게 이게 가능해지는 걸까 ?

10. 그래도 마냥 좋지 만은 않다.
• 클라이언트 서버 간의 중복 된 로직이 발생
(데이터 유효성 체크.. 등)
• SEO (short for search engine optimization)
• 높은 자바스크립트 테크닉 ( OOM 등 )
• 올바른 Restful API 설계와 견고한 보안적 설계가 필요.
• 유능한 클라이언트 개발자 구하기 어려움

11. SEO (Short for search Engine Optimization)..?
CSR(Client Side Rendering) 과 SSR(Server Side Rendering)

14. 이 문제를 해결하기 위한
CSR & SSR (Isomorphic) 개발 노력
(Angular Universal : https://universal.angular.io)

15. 더 자세한 것은 이 책을 추천!
• 클라이언트-서버 웹 앱 만들기 저. 캐시미어 새터노스

16. What is Angular ?

18. Angular (Client Side Framework)
Client Side Framework. (Google)
Component 기반, MVW(Model-View-Whatever : MVVM, MVC 등을 뜻함)
• Multi-Device : Web App, Native, Desktop
• Code Generation, Universal (Not SEO), Code Spitting
• Angular CLI (Quick source generate, Test, Transpile&Build)

19. AngularJs Vs Angular ?
AngularJs (AngularJs 1.x) 의 설계 상의 문제점 (스코프, 더티 체크 등)
을 해결하기 위해 이름만 비슷할 뿐 새로이 만든 것이 Angular.
AngularJs 2  Angular 네이밍 변경
 Angular.Js / Angular 의 버전 체계에 혼선이 발생.

21. Angular & Java
Angular Java
Dependencies NPM Maven
Build AngularCLI
(Webpack , Module
loader …)
Maven, Gradle …
Language TypeScript (Javascript) Java
Runtime Browser JVM

23. 1. 명확한 구조 ( 개발 체계 잡기 좋음 )
2. 객체 지향 개발 흐름
3. Template과 로직의 분리 (not JSX)
4. Typescript ( IDE 지원 좋음 )
5. Google의 적극적인 지원
높은 러닝 커브에도 추천하는 이유

24. Angular Architecture

25. Component
View를 구성하는 단위, Angular에서 가장 중요한 개념.
컴포넌트는 다른 컴포넌트를 포함할 수 있음 (부모-자식 관계 성립) : 다중 컴포넌트

26. Service
공통 비지니스 로직이 위치하는 곳, Angular core에서 라이프사이클 관리.

27. Route
요청 경로 (URL)에 따른 컴포넌트(View) 흐름을 제어.
Module
특정 목적에 연관 있는 Component의 집합.

28. <DEMO>

29. 보너스

30. 자바(Server Side)로 만드는 Single Page Application
Element(Component) 기반
자바 코드로 SPA 개발(컨버팅)
클라이언트 서버 간의 Data Binding 제공

31. Element

32. Vaadin Vs Angular

33. Vaadin

34. 다음 기회에..

35. See you later, Thank You.