닷넷 기반 오픈 소스를 활용한 모던 웹 어플리케이션 개발 전략

권효중

저는…• 권효중• Microsoft ASP.NET MVP• GE Healthcare Korea• http://gistcamp.com

손 !!

순서•웹개발의 분업화와 전문화 (20 분 )•백엔드 , 프론트엔드•협업• Single Page Application

•데모 (35 분 )

•Q & A, 수다 (10 분 )

설문조사구분 마이크로소프트 Preference

OS

IDE

VCS

Language

Web Frame-work

Browser

Database

• 대상 : 웹 개발자

Windows Mac OSX

Visual Studio SublimeText

TFS Git

C#, ASP.NET JavaScript, Python, Ruby

ASP.NET WebForm/MVC Express.js, Rails, Django

IE Chrome

SQL Server PostgreSQL, MongoDB

질문 : 선호하는 개발 환경은 ? • 응답인원 : 3 명

웹개발에 있어서 협업Backend Frontend

프론트엔드와 백엔드의 분리는• 단순히 다른 OS, Tool 을 쓸수 있느냐의 문제가 아님• 본질은 코드간의 의존성을 줄여주며 양질의 코드를 생산하게 해주는 것• 더불어 개발자의 전문성을 살릴 수 있게 해줌 .

어떻게 분업 / 협업 할것인가 ?

Single Page Application

The answer is

SPA ?

• Communication JSON, AJAX

• Backend RESTful Service

• Frontend UI, JavaScript

•URL Hash or PushState

How ?

DefineJSON

Integra-tion

RESTful

UI

Benefits of SPA

•Easy to keep UI state

•Better UX

•Faster than server rendering ( 최초 로딩은 예외 )

•Separation of Developers

Tool Sets for the Demo

Visual StudioNancyFXNuget

Ember.jsBowerGrunt

Git (

GitH

ub)

Nuget

• NuGet is the package manager for the Microsoft development plat-form including .NET.

• The NuGet Gallery is the central package repository used by all package authors and consumers.

• VS Tools Extensions Search Nuget

NancyFX• Nancy is a lightweight, low-cere-

mony, framework for building HTTP based services on .Net and Mono

• Run anywhere. Nancy is not built on any specific hosting technology can be run anywhere. Out of the box, Nancy supports running on ASP.NET/IIS, WCF, Self-hosting and any OWIN

• Install-Package nancy

NancyFX

- Inspired by Sinatra, ruby framework

Frank Sinatra (1915-1998) Nancy Sinatra (1940-)

Bower

• A package management for the web

• Invented by Twitter inc.

• npm install bower -g

Ember.js

• JavaScript Framework

• URL is core of Ember.js

• Convention over Configuration

• bower install ember

Grunt

• Task runner for the JavaScript

• Minifying resources, Concatena-tion, Compile CoffeeScript, etc…

• npm install grunt-cli -g

Competitors

NancyFX ASP.NET MVC, ASP.NET WebAPI, FubuMVC

Bower JamJS, Component, NPM with Browserify

Ember Angular, Backbone, Knockout, React, SpacePen 등등등

Grunt Gulp

감사합니다• Blog : funnygangstar.tistory.com

• Email : nicekhj@gmail.com

• Twitter : @nicekhj

• 데모 소스는 아래에서• https://github.com/RayKwon/com-

camp_demo_live• https://github.com/RayKwon/com-

camp_demo

Talk Talk Talk• ASP.NET• OWIN• Katana• Helios• NancyFX• Cloud• Azure• Nodejitsu• Node.js• MongoDB

• Microsoft MVP• JOB• NAVER D2FEST• Developer’s Life• GistCamp• Open Source

• HTML5• LESS• Grunt• Single Page

Application• Backbone.js• Ember.js• Angular.js• Knockout.js