XECon2015 :: [2-4] 오승현 - Chak 서비스 구축기 with XE3

오승현
• XE 1 서드파티 개발자
• XE 1 Contributor
• XECONTEST 2014 수상
• CHAK 개발 (15.06 ~ )

5
오픈소스 개발자와 사용자간의 커뮤니케이션을 제공
What is CHAK?

What is CHAK?
6
어디에나 포럼, 코멘트 서비스 제공

What is CHAK?
7
쉽고 간단한 설치

What is CHAK?
8
Just Copy & Paste

What is CHAK?
9
소셜 로그인

What is CHAK?
10
Syntax Highlighting

What is CHAK?
11
파일 업로드

16
다른 공간, 같은 커뮤니케이션

Service Preview
(서비스 시연)

SHOW CASE #1
19
D2 Hello World
NAVER 개발자들의 실전 노하우와 지식을 담은 기술 블로그

SHOW CASE #2
20
D2 STARTUP
FACTORY
D2 Startup Factory는 NAVER가 Tech Startup 생태계 저변
확대를 위해 만든 Accelerator로, 차별화된 Tech Startup을
직접 발굴해 육성하고 있습니다.

SHOW CASE #3
21
Laravel
Korean Docs
NaverD2 지원으로 작성된
라라벨 한국어 메뉴얼 깃허브 페이지

SHOW CASE #4
22
XpressEngine
XpressEngine은 누구나 쉽고 편하고 자유롭게 콘텐츠를 발행을
할 수 있도록 하기 위한 CMS(Content Management System)

처음 4가지 요구사항
(지금은 무한한 ∞ 요구사항)

CHAK 서비스 기본 요구사항
24
어디에나 착! 붙어야함1
SPA (Single Page Application)2
커뮤니케이션 (댓글, 포럼)3
소셜 로그인 (SNS Login)4

25
SPA (Single Page Application)

26
- Wikipedia
A single-page application (SPA) is a web application or web site that fits
on a single web page with the goal of providing
a more fluid user experience akin to a desktop application
웹 어플리케이션
데스크탑 어플리케이션과 같은
사용자 경험을 제공

27

28
Lots of people use React as the V in
MVC. Since React makes no
assumptions about the rest of your
technology stack, it's easy to try it out
on a small feature in an existing
project.
JUST UI
React abstracts away the DOM from
you, giving a simpler programming
model and better performance. React
can also render on the server using
Node, and it can power native apps
using React Native.
Virtual DOM
React implements one-way reactive
data flow which reduces boilerplate
and is easier to reason about than
traditional data binding.
DATA FLOW
https://facebook.github.io/react/

29

30
Request
Response
SERVER

1,300개 이상의 XE 모듈, 스킨, 애드온 …
32

서비스에 필요한 모듈만 따로 구현
33
+ CHAK
SERVICE Module

XpressEngine with React
34
+ CHAK
SERVICE LOGIC
Application
Request
Response

XE1 으로 서비스를 만들다보니
35
안되는게 있어? XE 코어를 수정해!

36
수정하고 나니 업데이트가 불안하다

37
UI 테스트만 믿고 가야하나?
2014 XECON - Selenium for UI Test 
오승훈 XE 커뮤니티 개발 그룹

Xpress Engine3로 착 서비스 확장하기
(실제 CHAK 서비스에서 활용중인 패키지 소개)

XE3에서 강화된 특징
39
• Modern PHP (Autoloading, Composer, etc)
• 라라벨(Laravel) 프레임워크 기반의 오픈소스 CMS
• 유용한 XE3 Core Packages
• Cloud File System
• Testable (Unit test)

Autoloading, PSR-4
40
XE1
모듈에서 따로 구현한 클래스는 include 해야함

Michael님의 유튜브(YouTube) 모듈
41

Autoloading, PSR-4
42
XE3
현재 클래스의 네임 스페이스를 지정
필요한 클래스들을 로드

Composer & Packagist
43
Composer is a brilliant dependency manager for PHP. List
your project’s dependencies in a composer.json file and,
with a few simple commands, Composer will automatically
download your project’s dependencies and setup
autoloading for you.
There are already a lot of PHP libraries that are compatible
with Composer, ready to be used in your project. These
“packages” are listed on Packagist, the official repository
for Composer-compatible PHP libraries.
composer require phpunit/phpunit

Laravel 프레임워크 기반의 오픈소스 CMS
44

Authentication
Billing
Elixir
Authorization
Cache
Encryption
Events
Helpers
Package Development
Filesystem
Localization
Pagination
Redis Session
Artisan Console
Collections
Errors & Logging
Hashing
Mail
Queues
SSH Tasks
Task Scheduling Testing Validation

유용한 XE3 코어 패키지
XpressengineConfig
XpressengineCategory
XpressengineInterception
XpressengineComment
XpressengineDocument
XpressengineKeygen
XpressengineMenu
XpressengineRegister
XpressengineSite
XpressenginePermission
XpressengineRouting
XpressengineSkin
XpressengineTag XpressengineTemporary
XpressengineCounter
XpressengineDynamicField
XpressengineMedia
XpressengineDatabase
XpressengineHttp
XpressengineMember
XpressenginePlugin
XpressengineSeo
XpressengineStorage
XpressenginePresenter
XpressengineSettings
XpressengineSupport
XpressengineTheme XpressengineToggleMenu
XpressengineTranslation XpressengineTrash XpressengineUIObject XpressengineWidget

Event System with Queued Job
48
Laravel's events provides a simple observer implementation,
allowing you to subscribe and listen for events in your application
Events and Queues

<?php
class documentController extends document 
{
function insertDocument() 
{
// Insert data into the DB 
$output = executeQuery('document.insertDocument', $obj); 
if(!$output->toBool()) 
{ 
$oDB->rollback(); 
return $output; 
}
ModuleHandler::triggerCall('document.insertDocument', 'before', $obj); 
} 
Event System (XE 1 Trigger)
49

class DocumentHandler 
{ 
public function insertDocument($doc) 
{
$this->insertDoc($doc);
 
Event::fire(new DocumentInserted($doc)); 
 
return $doc; 
}
Event System (Laravel)
50
.
.
.

class EventServiceProvider extends ServiceProvider 
{ 
/** 
* The event listener mappings for the application. 
* 
* @var array 
*/ 
protected $listen = [ 
ArticleWasDeleted::class => [ 
DeleteArticleUser::class, 
RemoveFileFromStorage::class, 
WebhookQueueSender::class, 
DeleteArticleCodes::class, 
DeleteArticleFiles::class, 
DeleteArticleLinks::class, 
DeleteArticleTags::class, 
DeleteArticleVotes::class, 
DeleteArticleChildren::class 
],
Event System (Laravel)
51
웹훅도 날려야하고..
클라우드서버에서 파일도 삭제해야하고..
자식 댓글도 삭제해야하니..
Recursive하게 다시 파일을 삭제하고..

52
출처 : 생활코딩

class DeleteArticleFiles implements ShouldQueue 
{ 
use InteractsWithQueue; 
 
/** @var Log */ 
private $log; 
 
/** @var FileRepositoryInterface */ 
private $articleFiles; 
53
ShouldQueue 인터페이스 상속만으로 비동기 작업 처리
.
.
.

54
바로응답
Artisan
Listen
출처 : 생활코딩

Cloud File System
55
Filesystem / Cloud Storage
The Laravel Flysystem integration provides simple to use drivers for working with local
filesystems, Amazon S3, and Rackspace Cloud Storage.

Cloud File System
56
Storage::disk('local')->put('file.txt', 'Contents');

Cloud File System (Custom Disk)
57
League/Flysystem/AdapterInterface

XE3 Config with CHAK
58
XE3의 Config 패키지는 XE3 에서 각종 설정 정보를 저장하고 관리하며
Hierarchy 구조로 상위 참조가 가능한 key - value 저장소
XpressengineConfig

59
사용자 (Naver)
코멘트1
CHAK SERVICE
사용자 (XE)
코멘트2 코멘트3 포럼1 포럼2 포럼3
포럼 혹은 코멘트 인스턴스
인스턴스를 관리할 수 있는 그룹

사용자 (Naver)
코멘트1
CHAK SERVICE
사용자 (XE)
60
착 포럼 인스턴스에 대한 설정(스킨) 정보를 요청
{
"skin" : null
}

사용자 (XE)
61
사용자 (Naver)
코멘트1
CHAK SERVICE
{
"skin" : null
}
부모(Parent)의 설정 정보를 요청

사용자 (XE)사용자 (Naver)
코멘트1
CHAK SERVICE
62
기본 Default 설정 정보를 요청
{
"skin" : "default"
}

63
Cfg::get(‘chak.upgle.1000-0000’);
Instance ID
group ID
CHAK Service
[ . ] 으로 구분되는 구분자(델리미터)를 통해서 설정 정보를 가져올 수 있다.

유용한 XE3 코어 패키지
XpressengineConfig
XpressengineCategory
XpressengineInterception
XpressengineComment
XpressengineDocument
XpressengineKeygen
XpressengineMenu
XpressengineRegister
XpressengineSite
XpressenginePermission
XpressengineRouting
XpressengineSkin
XpressengineTag XpressengineTemporary
XpressengineCounter
XpressengineDynamicField
XpressengineMedia
XpressengineDatabase
XpressengineHttp
XpressengineMember
XpressenginePlugin
XpressengineSeo
XpressengineStorage
XpressenginePresenter
XpressengineSettings
XpressengineSupport
XpressengineTheme XpressengineToggleMenu
XpressengineTranslation XpressengineTrash XpressengineUIObject XpressengineWidget
너무 많아서 다 보여드릴수가 없어요!

Artisan Command 를 통한 서비스 관리

Artisan Command
Artisan Command 를 통한 서비스 관리 (스케쥴링)
Linux
Cron
Job
http://laravel.com/docs/5.1/scheduling

Unit Testing
$_SESSION 글로벌 변수에
의존하고 있기도 하고…
Testable XE3

Unit Testing (XE1)
$_SESSION 글로벌 변수에
의존하고 있기도 하고…
다른 Class의 인스턴스를
런타임 중에 받아오고

Unit Testing (DI)
class User {
public function getCurrentUser() {
$user_id = $_SESSION['user_id'];
$user = new User();
$user->select('id', 'username')
->where('id', $user_id)
->limit(1)
->get();
if($user->num_results() > 0)
{
return $user->all();
}
return null;
}
}
class User {
protected $_db;
public function __construct($db_connection)
{
$this->_db = $db_connection;
}
public function getUser($userId)
{
$user = $this->_db
->select('user')
->where('id', $user_id)
->limit(1)
->get();
if($user->num_results() >0)
{
return $user->all();
}
return false;
}
}
Non-Testable Code Testable Code
의존성을 생성자에서 주입받는다.

Unit Testing (XE3)
XE3 Test Coverage (76%)

Unit Testing
CHAK Service Unit Test

Unit Testing
72
CostofChange
0
5
10
15
20
Development Time
XE1 XE3 (TDD Available)
Cost of change vs development time

XE3로 시작하는 웹서비스 장점
73
• 전세계 수 많은 사용자로부터 검증된 프레임워크 기반 오픈 소스 코드
• 개발 비용 최소화 (XE 패키지 활용, 서비스 개발 기간 단축)
• 서드 파티 모듈을 활용하여 서비스 자체 컨텐츠에 집중할 수 있다.
• 테스팅을 통한 안정적인 배포및 서비스 운영 가능하다.

XE3로 멋진 서비스를 만들어주세요!

XECon2015 :: [2-4] 오승현 - Chak 서비스 구축기 with XE3

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a XECon2015 :: [2-4] 오승현 - Chak 서비스 구축기 with XE3

Semelhante a XECon2015 :: [2-4] 오승현 - Chak 서비스 구축기 with XE3 (20)

Mais de XpressEngine

Mais de XpressEngine (20)

XECon2015 :: [2-4] 오승현 - Chak 서비스 구축기 with XE3