xecon2015 :: [2-4] 오승현 - chak 서비스 구축기 with xe3

오승현

• �XE�1�서드파티�개발자�

• �XE�1�Contributor�

• �XECONTEST�2014�수상�

• �CHAK�개발�(15.06�~�)

오승현

• XE�1�서드파티�개발자�

• �XE�1�Contributor�

• �XECONTEST�2014�수상�

• �CHAK�개발�(15.06�~�)

What is CHAK?

4

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

파일�업로드

What is CHAK?

12

Web�Hook

How to use?

13착!

How to use?

14착!

15

어때요�참�쉽죠?

16

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

Service Preview(서비스�시연)

SHOW CASE(착�적용�사례)

SHOW CASE #1

19

D2�Hello�WorldNAVER�개발자들의�실전�노하우와�지식을�담은�기술�블로그

SHOW CASE #2

20

D2�STARTUP�FACTORYD2�Startup�Factory는�NAVER가�Tech�Startup�생태계�저변�

확대를�위해�만든�Accelerator로,�차별화된�Tech�Startup을�

직접�발굴해�육성하고�있습니다.�

SHOW CASE #3

21

Laravel�Korean�DocsNaverD2�지원으로�작성된��

라라벨�한국어�메뉴얼�깃허브�페이지

SHOW CASE #4

22

XpressEngineXpressEngine은 누구나 쉽고 편하고 자유롭게 콘텐츠를 발행을

할 수 있도록 하기 위한 CMS(Content Management System)

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

CHAK 서비스 기본 요구사항

24

어디에나�착!�붙어야함1

SPA�(Single�Page�Application)2

커뮤니케이션�(댓글,�포럼)3

소셜�로그인�(SNS�Login)4

25

SPA�(Single�Page�Application)

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

웹 어플리케이션

데스크탑 어플리케이션과 같은 사용자 경험을 제공

SPA (Single Page Application)

27

SPA (Single Page Application)

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 UIReact 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 DOMReact 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/

SPA (Single Page Application)

29

SPA (Single Page Application)

30

Request

Response

SERVER

31

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

32

서비스에 필요한 모듈만 따로 구현

33

+ CHAK SERVICE Module

XpressEngine with React

34

+ CHAK SERVICE LOGIC

Application

Request

Response

XE1 으로 서비스를 만들다보니

35

안되는게�있어?�XE�코어를�수정해!

XE1 으로 서비스를 만들다보니

36

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

XE1 으로 서비스를 만들다보니

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 코어 패키지

Xpressengine\Config

Xpressengine\Category

Xpressengine\Interception

Xpressengine\Comment

Xpressengine\Document

Xpressengine\Keygen

Xpressengine\Menu

Xpressengine\Register

Xpressengine\Site

Xpressengine\Permission

Xpressengine\Routing

Xpressengine\Skin

Xpressengine\Tag Xpressengine\Temporary

Xpressengine\Counter

Xpressengine\DynamicField

Xpressengine\Media

Xpressengine\Database

Xpressengine\Http

Xpressengine\Member

Xpressengine\Plugin

Xpressengine\Seo

Xpressengine\Storage

Xpressengine\Presenter

Xpressengine\Settings

Xpressengine\Support

Xpressengine\Theme Xpressengine\ToggleMenu

Xpressengine\Translation Xpressengine\Trash Xpressengine\UIObject Xpressengine\Widget

CHAK with Laravel & XE3

47

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하게 다시 파일을 삭제하고..

Event System with Queued Job

52

출처 : 생활코딩

class DeleteArticleFiles implements ShouldQueue{ use InteractsWithQueue; /** @var Log */ private $log; /** @var FileRepositoryInterface */ private $articleFiles;

Event System with Queued Job

53

ShouldQueue 인터페이스 상속만으로 비동기 작업 처리

.

.

.

Event System with Queued Job

54

바로응답

ArtisanListen

출처 : 생활코딩

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 저장소

Xpressengine\Config

XE3 Config with CHAK

59

사용자 (Naver)

코멘트1

CHAK SERVICE

사용자 (XE)

코멘트2 코멘트3 포럼1 포럼2 포럼3

포럼 혹은 코멘트 인스턴스

인스턴스를 관리할 수 있는 그룹

사용자 (Naver)

코멘트1

CHAK SERVICE

사용자 (XE)

코멘트2 코멘트3 포럼1 포럼2 포럼3

XE3 Config with CHAK

60

착 포럼 인스턴스에 대한 설정(스킨) 정보를 요청

{"skin" : null

}

사용자 (XE)

XE3 Config with CHAK

61

사용자 (Naver)

코멘트1

CHAK SERVICE

코멘트2 코멘트3 포럼1 포럼2 포럼3

{"skin" : null

}

부모(Parent)의 설정 정보를 요청

사용자 (XE)사용자 (Naver)

코멘트1

CHAK SERVICE

코멘트2 코멘트3 포럼1 포럼2 포럼3

XE3 Config with CHAK

62

기본 Default 설정 정보를 요청

{"skin" : "default"

}

XE3 Config with CHAK

63

Cfg::get(‘chak.upgle.1000-0000’);

Instance ID

group ID

CHAK Service

[ . ] 으로 구분되는 구분자(델리미터)를 통해서 설정 정보를 가져올 수 있다.

유용한 XE3 코어 패키지

Xpressengine\Config

Xpressengine\Category

Xpressengine\Interception

Xpressengine\Comment

Xpressengine\Document

Xpressengine\Keygen

Xpressengine\Menu

Xpressengine\Register

Xpressengine\Site

Xpressengine\Permission

Xpressengine\Routing

Xpressengine\Skin

Xpressengine\Tag Xpressengine\Temporary

Xpressengine\Counter

Xpressengine\DynamicField

Xpressengine\Media

Xpressengine\Database

Xpressengine\Http

Xpressengine\Member

Xpressengine\Plugin

Xpressengine\Seo

Xpressengine\Storage

Xpressengine\Presenter

Xpressengine\Settings

Xpressengine\Support

Xpressengine\Theme Xpressengine\ToggleMenu

Xpressengine\Translation Xpressengine\Trash Xpressengine\UIObject Xpressengine\Widget

너무 많아서 다 보여드릴수가 없어요!

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

Cos

t of C

hang

e

0

5

10

15

20

Development Time

XE1 XE3 (TDD Available)

Cost of change vs development time

XE3로 시작하는 웹서비스 장점

73

• �전세계�수�많은�사용자로부터�검증된�프레임워크�기반��오픈�소스�코드�

• 개발�비용�최소화�(XE�패키지�활용,�서비스�개발�기간�단축)�

• 서드�파티�모듈을�활용하여�서비스�자체�컨텐츠에�집중할�수�있다.�

• 테스팅을�통한�안정적인�배포및�서비스�운영�가능하다.

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

감사합니다