javascript로 오픈소스를 해보자. bsjs

자바스크립트로 오픈소스하기

Copyright 2013.10 projectBS committee All rights reserved

135

발표자 맹기완, 비사이드소프트 대표

창업하고 10년이나 살아있음

오늘 할 이야기 자바스크립트로 오픈소스 하기

간단한 데모와 설명

제이쿼리를 쓰다가.... 1.4로 사이트를 구축시작

완성하고 납품을 안했는데 1.7이 등장

이제와 버전업이 가능한가?

할 수 없다. 1.4에 의존적인 플러그인이 다수 존재

이미 1.4 API가 온 사이트에 적용된 상태

안할 수 있나? 보안문제, 버그픽스, 새 브라우저 대응,

성능 향상...

그 외에도 제이쿼리를 쓰다가..

여러 개의 애니메이션을 걸면 너무 느림

CSS3 prefix를 안해줌

하위 브라우저 호환도 opacity만..

그 외에도 제이쿼리를 쓰다가..

IE 하위버전에서 돌아는 가지만 너무 느림

다양한 안드로이드 브라우저에서 문제출몰

반대로 IE최신버전도 문제가 속출

고객은 IE와 이상한 안드로이드에서

빨리 돌아가길 원하고..

먹고는 살아야하고..

어쩔 수 없이 비슷한걸 만들어서

유지보수 직접하기로..

말이 되나?

1.  짜피 핫한 이슈는 RSS나 메일링으로 유명한 라이브

러리소식을 수신하고 같이 패치

2.  수주한 일을 수행하면서 버그 픽스도 회사가 망하기

전까진 지속적으로 할 수 밖에 없음

3.  무엇보다 회사라 담당자를 배치할 수 있음

유지비용이 너무 큰게 아닌지..

결국 가장 컸던 비용..

제이쿼리가 지원안해서 못해요.

일 자체가 없어지는 비용..

근데 왜 오픈소스를 하려고? 2013년 2분기정도부터...

제이쿼리 클론 만드는 걸로 해결이 안됨

현재 보통의 사이트에 수십개의 플러그인과

UI프레임웍이 난무함

구멍가게가 감당할 수 없는 분량

이왕 오픈소스 할거면 제대로 해보자. 무엇이 제대로인가?

..잘 모름.

해외사례, 국내사례 공부(지금도)

오픈소스를 보면서 느낀점 코드를 사용하는 쪽을 향한 오픈소스의

많은 사례는 쉽게 이해했음

수많은 라이센스 공부 - MIT, GPL...

오픈소스를 보면서 느낀점 코드에 참여하는 사람에게 권리를 주자!

커미터야말로 진짜 깊이 쓸 사용자!

커미터를 모을 방법이 필요함.

커미터가 쉽게 될 수 있는 길을 열자.

오픈소스가 투자를 받거나 수익을 발생시키면 커

미터에게도 혜택이 돌아가게 해보면...

1.  우선 회사와의 관계를 완전히 제거

2.  코드의 귀속권한을 커미터위원회에게

3.  커미터를 언디파인드에서 모집, 시작

근데 목적이나 비전은? 가장 많이 본 목적들..

1.  자아추구, 여가활용

2.  커리어에 도움, 직장인의 다른 탈출구

3.  기업의 제품홍보 및 상품화단계

4.  반제품화를 통한 SI수주 증대

그게 아닌 좋은 목표를 찾자! 전자정부 표준프레임웍에 도전하거나

각종 대회에 오픈 소스로 도전하거나

SI기업들이 직접 쓰는 레퍼런스를 만들어가거나

D2나 JCO에도 참가해보고 해외에도 진출하거나.. ..이것저것 다 해보는 중

혼자가 아닌 커미터들과 함께..

정태원

개발경력 10년의 평범한 개발자 사용언어: java, C#, javascript 최근 열심히 javascript 공부중

공부 많이 하지 않고 쉽고 빠르게 그리고 화려하게

CSS 키프레임 애니메이션 만들기

jQuery코드와 bsjs코드 비교

키프레임 애니메이션 만들기

jQuery 코드

jQuery 코드

jQuery 코드

bsjs 코드

bsjs 코드

CSS 선언

애니매이션 실행

코드비교

36 줄 102 줄

bsjs jQuery

bsjs의 경우

bsjs 장점

배우기 쉽다 -기존 css 문법을 사용 간편하다 -작성하는 코드의 양이 적다 -prefix를 bs core에서 처리 -구브라우저 호환성 지원 -생산성이 올라간다.

사용법

bs.Css() bs.Dom() bs.ANI.tween() bs.WIN.on() bs.img()

bs.Dom

bs.Dom(’<div></div>’) .S(‘<’, ‘body’); bs.Dom('<div></div>') .S('mousedown', function(e) { });

bs.Css

bs.Css(‘#id’).S(‘left’,100, ‘top’,100, ‘float’, ‘left’);

bs.WIN.on

bs.WIN.on( 'keydown', function(e){ if( e.key( 'a' )) function(){}; if( e.key( ‘enter’ )) function(){}; });

bs.ANI.tween

bs.Dom(‘#id’).S('width', 0 ); bs.ANI.tween(bs.Dom(‘#id’), 'width', 100, 'time', .5);

bs.img

bs.img(function(){}, ‘image01.jpg',

‘image02.jpg', … ‘image25.jpg');

페이스북으로 오셔서 함께해요. https://www.facebook.com/groups/bs5js Github 에서 소스도 확인하세요. https://github.com/projectbs/bsjs

Q&A

THANK YOU