토종 개발자가 바라본 실리콘밸리 개발 트랜드

박호준 시니어 소프트웨어 엔지니어 LinkedIn www.linkedin.com/in/justindoit

토종 개발자가 바라본실리콘벨리 개발 트랜드

2

오늘은 ,

간략한 소개 링크드인 빅데이타 활용 사례 링크드인 개발 프로세스 소개 프로젝트 개발 스택 공유 질의 응답

3

소개 링크드인 비지니스 데이타 분석팀 시니어 소프트웨어 개발자 ( 현재 )

실리콘벨리 스타트업 프론트엔드 개발자 (Gala-net, SugarCRM)

뉴욕 주립대 컴퓨터 공학 학사 한국에서 5 년간 웹 개발자 및 DBA ( 네오액트 , 지니키즈 , WCG)

4

링크드인 소개

11yearsold

5

링크드인 소개

330,000,000Members

6

링크드인 소개

25,000,000,000Page Views

7

링크드인 소개

20,000,000,000Connections

8

링크드인 소개

4,000,000Companies

9

링크드인 비지니스 모델

LTSTalent Solution

LMSMarketing Solution

LSSSales Solution

Hire Market Sell

webdev @ Linked[in]VerticalTeams

HorizontalTeamsPlay at Linkedin

Dust.li

Team Money

Sales Navigator

BrandingAnd Marketing

pEMBERly

RecruitPlatform

Slideshare

REST.li

Linkedin Profile[in]Mail

Davinci

11

링크드인 빅데이터 팀

What can we do with Linkedin

data

?

Sales

Talent flow between companies

Product & engineering

Is it simple?Member attributes Page View events data

Photo Credit: https://www.flickr.com/photos/johnjoh/1060267344

Our data vineyard

Data infra: collect & ferment data

Collect & Ferment DataKafka + Hadoop

Serve DataPinot

Taste DataEasy-to-use visualization

Data Computation

ETL

HDFS

YARN

Map-Reduce Spark Tez

Pig Hive Cubert

Data infra: collect & ferment data

Collect & Ferment DataKafka + Hadoop

Serve DataPinot

Taste DataEasy-to-use visualization

Products for members/customers with real-time interactive analytics

• Who’s Viewed Your Profile• Ads Reporting• Jobs Analytics

Categories of interactive analytics products

Interactive business analytics for internal use• How feature X is performing

Real-time business monitoring• Page view changes across mobile devices

Reporting UI: serve & taste data

Collect & Ferment DataKafka + Hadoop

Serve DataPinot

Taste DataEasy-to-use visualization

I want to access big data without running SQL

Business need

Start a new dashboard with one click

Select what metrics/dimensions you want

Charts are rendered in just a few seconds

Zoom into a single chart

Filter on various dimensions

28

링크드인 개발 프로세스

How build a product at Linkedin Daily Scrum

How build a product at Linkedin

매일 오전 스크럼을 통한 의견교환

How build a product at Linkedin

매일 오전 스크럼을 통한 의견교환 개발자 스스로 결정하는 완료시점

How build a product at Linkedin

매일 오전 스크럼을 통한 의견교환 개발자 스스로 결정하는 완료시점 언제 어디서든 진행상황을

공유가능

How build a product at Linkedin

How build a product at Linkedin

Rest.li (Data API)

https://github.com/linkedin/rest.li/wiki

Rest.li (Data API)

코드 리뷰

https://www.reviewboard.org/

코드 리뷰

코드 리뷰

코드 리뷰

41

A/B Testing ( 내부 테스트 )

42

A/B Testing

43

A/B Testing ( 전체 유저대상 )

44

A/B Testing

 재발생되는 버그를 잡기 위해 웹드라이버 테스트를 활용

45

테스팅 : Selenium WebDriver Tests

46

LID (Linkedin Deployment)

47

CRT

48

[in]Graph (Monitoring)

49

링크드인 개발 스택

50

Web Frameworks, recommend? Play Spring Ruby on Rails Yii Node.JS …

Angular Backbone jQuery YUI Require Knockout Bootstrap …

51

Comparison

http://todomvc.com/

52

We’re using,

53

개발 사례 : BackboneJS on PHP

Pure SPA

Metadata Manager

Data Manager

54

개발 사례 : BackboneJS on Java Play

Hybrid Web Application

sbt-concat, sass compiler

Model Hierarchy

55

개발 사례 : AngularJS on Java Play

Pure SPA

Grunt Builder

Less compiler by Grunt

56

왜 리소스 관리자가 중요한가 ?

수많은 JS/CSS 라이브러리의 증가 라이브러리 버젼 관리 중복된 리소스 로딩으로 인한 페이지 로딩 지연

57

파일 및 디렉토리 구성 (1)

리소스 종류별로 구분

58

파일 및 디렉토리 구성 (2)

각 기능별로 구성

59

메타 데이타 관리자 Sort the dependent modules ( 필수 모듈 순서대로 정렬 )

FlexListView

extends:ListView

ListView

DashableListView

extends:ListView

RecordListView

Extends:FlexListView

ListView

FlexListView

extends:ListView

DashableListView

extends:ListView

RecordListView

Extends:FlexListView

60

Great Design patterns are reusable, modular expressions of what’s going on in

your code.좋은 패턴 디자인은 재사용이 가능하고무엇을 하려고 하는지 코드에 그대로 표현되어 나타난다 .

They allow you to communicate to other developers simply by the way you code,in addition to being easily maintainable

themselves패턴 디자인은 다른 개발자와의 코드 교환이 쉬우며 ,각자가 관리 및 유지하기가 쉽게 해준다 .

왜 디자인 패턴을 사용해야 하나 ?

61

디자인 패턴들 Factory

Singleton

MVC

Strongly OOP

Mixin

Event Driven

62

객체 지향적 프로그래밍 코드를 재활용하고 재사용가능 직관적인 코드 디자인 시간당 생산량 증가

ListView

FlexListView

SubPanelListView

DashableListView

RecordListViewSelectionListView

63

Mixin pool

Decorator: 믹스인 ( 플러그인 )

RecordListView

extends:ListViewErrorDecoration

Editable

MergeDuplicates

CreateViewAudit

FindDuplicates

Tooltip

ListView MergeDuplicateView

Timeago

ActivityStreamView

64

성능 튜닝 중복된 이벤트 감시자를 줄인다 이벤트 감시자 최적화

Backbone: _events stack

Angular: $__watchers, and $scope variables in $digest cycle

다음은 얼마나 많은 감시자가 추가 되었을지 생각해 봅시다 .

65

브라우져는 죄가 없습니다 .

66

메모리 관리 개별적으로 할당한 메모리는

책임지고 해지 시켜준다

67

메모리 관리 : 계속 유닛 테스트를 활용하여 메모리

누수 여부를 파악 한다

68

디버깅 파이어버그 크롬 개발자 도구

Network filtering

Recording

Profiler

Local Storage in resources tab

69

유닛 테스트 Jasmine, Karma, Sinon

Travis CI

Selenium WebDriver

70

Q & A

71

개인적인 질문 편하게 이메일로 보내주세요

^^