웹-프론트엔드 프레임워크를 고르기 위한 팁

17
2015 WePlanet Co., Ltd. Webframeworks.kr & undefine:D 2015. 07.29 웹 - 웹웹웹웹웹 웹웹웹웹웹 , 웹웹웹 웹웹웹웹 ? 웹웹웹 , wePlanet “ 본 본본본 webframeworks.kr 본 본본본 본본 본본본 , 본본 본본본본본본 본본본본 .”

Upload: webframeworks

Post on 17-Aug-2015

246 views

Category:

Internet


5 download

TRANSCRIPT

Page 1: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

Webframeworks.kr & undefine:D

2015. 07.29

웹 - 프론트엔드 프레임워크 ,

어떻게 고를까요 ?

정진태 , wePlanet

“ 본 세션은 webframeworks.kr 의 홍보가 섞여 있으니 , 이점 유의해주시기 바랍니다 .”

Page 2: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

webframeworks.kr다양한 웹기반 서비스

Page 3: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

webframeworks.kr다양하게 사용되는 프레임워크

http://stackshare.io

Page 4: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

Webframeworks.kr다양하게 일하고 있는 Front-End Developer(1)

( 출처 ) 웹 Front-End 실무 이야기http://www.slideshare.net/jinkwonlee52/frontend-46605098

Page 5: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

Webframeworks.kr다양하게 일하고 있는 Front-End Developer(2)

( 출처 ) 웹 Front-End 실무 이야기http://www.slideshare.net/jinkwonlee52/frontend-46605098

CSS, HTML, JS

Logic

UI Component

UI(CSS) Framework

JavascriptFramework

Page 6: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

프레임워크 적용의 현실 / 한계 : 새로운 프레임워크 적용에 대한 참고 자료 및 사례가 매우 제한적이기 때문에 많은 시행착오가 생겨남

“ 이번에 AngluarJS 에서 관리자화면을 개발했는데 말이죠 … ”

Page 7: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

조언도 들어봤습니다 .사실 그래도 고민은 계속 됩니다 .

닭잡는데 쓰는 소잡는 칼 ?

닭을 잡다보면 소도 잡지 않을까 ?

나는 무엇을 알고 있을까 ?HTML? CSS? jQuery?

나는 열심히 할건데 , 다른 팀원도 그럴까 ?

( 참고 ) Web Front-End 개발과정 살펴보기 – 윤지수 http://www.slideshare.net/jisuyoun/web-frontend

내가 생각하고 있는 웹은어떤 모습일까 ?

?이 프레임워크가 지향하는 바는 ?

Page 8: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

( 추천 1) 해봅시다 . 백문이불여일 RUNTodoMVC

http://www.todomvc.com

Page 9: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

TodoMVCDemo

http://www.todomvc.com

Page 10: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

TodoMVCSource: Structuring and Organizing

Page 11: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

살펴보았습니다 .사실 그래도 고민은 계속 됩니다 .

?조금 더 빨리 체험해볼순 없을까 ?

영어야 !영어라고 !

우리회사 Back-End 랑 잘어울리는게 맞을까 ?

Page 12: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

( 추천 2) WebFrameworks.kr웹프레임워크 정보 습득

http://www.webframeworks.kr

Page 13: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

WebFrameworks.kr웹프레임워크의 범위

W E B A P P L I C A T I O N

Tool Library UI Framework

JS Web Framework

Front-End

Back-End

Full-stack

Express

AngularJS

BackBoneJS

ReactJS

ExtJS

Meteor

Bootstrap Foundation UI Bootstrap

jQuery

UnderscoreJS

D3

ModernizrJS

yo

bower

Grunt/ Gulp

Jasmine

Page 14: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

WebFrameworks.kr웹프레임워크의 선택

Front-End

AngularJS

BackBoneJS

ReactJS

ExtJS

• Model-View-Whatever framework• Two-way data binding (Model-View)• Directives (Extended HTML)• Dependency injection• Google Sponsor• 속도가 빠르진 않다 (?)• Angular2 를 사용하기 위해선 새로 개발

• 경량프레임워크• 다양한 응용가능• 미니멀한 MVC => 미니멀리즘

(Minimalism)• 여러 라이브러리와 플러그인이 함께

사용되야하는 경우가 많아서 때문에 숙련자들에게 추천 => 학습커브가 높음

• 데스크탑 스타일의 웹기반 어플리케이션• 거업업무환경에 최적화된 UI 컴포넌트와

반응형 레이아웃을 제공하므로 별도의 UI Framework 없이 사용

• 빠른개발을 할 수 있는 툴을 제공• 일부 유료

• MVC 중 View 에 집중• Flux Architecture 를 사용하기

때문에 대형 어플리케이션에도 잘 어울림

• 빠른 속도• 학습커브가 낮음 .• Facebook Sponsor

“There is no magic solution for all problem.”

Page 15: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

WebFrameworks.kr머뭇거려지는 건 똑같고…

?

Page 16: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

WebFrameworks.kr함께 고민하며 만들어갑니다 .

Get Started

Tutorials

Quick StartSeminar

Code-Lab

Conference

UI 프레임워크

프론트엔드

프레임워크

백엔드프레임워크

풀스택프레임워크

라이브러리 & 툴

8 월 중순 예정 ,8 시간 집중코딩 !

Page 17: 웹-프론트엔드 프레임워크를 고르기 위한 팁

2015 WePlanet Co., Ltd.

감사합니다 .