Transcript Modern Web App

저는…
• 권효중
• Microsoft ASP.NET MVP
• GE Healthcare Korea
• http://gistcamp.com
손 !!
순서
• 웹개발의 분업화와 전문화 (20분)
• 백엔드, 프론트엔드
• 협업
• Single Page Application
• 데모 (35분)
• Q & A, 수다 (10분)
설문조사
질문 : 선호하는 개발 환경은?
구분
마이크로소프트
•
대상 : 웹 개발자
•
응답인원 : 3명 
Preference
OS
Windows
Mac OSX
IDE
Visual Studio
SublimeText
Git
VCS
TFS
Language
C#, ASP.NET
JavaScript, Python, Ruby
Web Framework
ASP.NET WebForm/MVC
Express.js, Rails, Django
Browser
Database
IE
SQL Server
Chrome
PostgreSQL, MongoDB
웹개발에 있어서 협업
Backend
Frontend
프론트엔드와 백엔드의 분리는
• 단순히 다른 OS, Tool을 쓸수 있느냐
의 문제가 아님
• 본질은 코드간의 의존성을 줄여주며
양질의 코드를 생산하게 해주는 것
• 더불어 개발자의 전문성을 살릴 수 있
게 해줌.
어떻게 분업/협업 할것인가?
The answer is
Single
Page
Application
SPA ?
• Communication  JSON, AJAX
• Backend  RESTful Service
• Frontend  UI, JavaScript
• URL  Hash or PushState
How ?
RESTful
Integratio
n
Define
JSON
UI
Benefits of SPA
• Easy to keep UI state
• Better UX
• Faster than server rendering
(최초 로딩은 예외)
• Separation of Developers
Tool Sets for the Demo
Ember.js
Bower
Grunt
Git (GitHub)
Visual Studio
NancyFX
Nuget
Nuget
• NuGet is the package manager for
the Microsoft development platform
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-ceremony,
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, Concatenation,
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 : [email protected]
• Twitter : @nicekhj
• 데모 소스는 아래에서
• https://github.com/RayKwon/comcamp_d
emo_live
• https://github.com/RayKwon/comcamp_d
emo
Talk Talk Talk
• ASP.NET
• Microsoft MVP
• HTML5
• OWIN
• JOB
• LESS
• Katana
• NAVER D2FEST
• Grunt
• Helios
• Developer’s Life
• NancyFX
• GistCamp
• Single Page
Application
• Cloud
• Open Source
• Azure
• Nodejitsu
• Node.js
• MongoDB
• Backbone.js
• Ember.js
• Angular.js
• Knockout.js