개발 공부 - Javascript 프레임워크

자바스크립트 프레임워크 비교

- 써본 것 - 

1) JQuery : ajax, 비동기가 중요하다.

2) React : 타입스크립트 사용 시에 추천이었다! 

3) Vue : 프론트엔드 쪽 프레임워크! 이것은 React보다 덜 써봤으나 추천한다고 한다... (난 아님)

4) Angular : 이것도 Javascript 전용으로 개발하자고 해서 공부했었으나 React로 우회했다.

5) Node.js : 브라우저 외에서 Javascript 동작하도록 하는 런타임 환경 (좋다!)

일반 정보[편집]

프레임워크	비교 대상 버전	크기	라이선스	소스 언어
Angular	7 2018년 10월 18일	563 kB (minified & compressed)	MIT	TypeScript
AngularJS	1.5.0 2016년 2월 5일	144 kB (minified & compressed)	MIT	JavaScript
아파치 플렉스	0.9.4 2018년 11월 5일	19 kB (zipped)	Apache	ActionScript 3, MXML, CSS
Backbone.js	1.2.1 2015년 6월	7.3 kB (Packed and gzipped)	MIT	JavaScript
Dojo	1.10.4 2015년 1월 18일	Variable. Base size: 41 kB (minified & gzipped), 155 kB (minified), 598 kB (uncompressed)[1]	BSD & AFL	자바스크립트 + HTML
Ember.js	1.7.0 2014년 8월 19일	95 kB (minified & gzipped), 340 kB (minified), 1.5 MB (uncompressed)	MIT	JavaScript
Enyo	2.0.1 2012년 8월 30일	<25 kB (core gzipped)	Apache 2[2]	JavaScript
Express.js			MIT	NodeJS
Ext JS	4.2 2013년 3월 13일	84–502 kB	GPL & 상용[3]	JavaScript
구글 웹 툴킷	2.7.0 2014년 11월	Variable	Apache	Java
JQuery (library)	3.4.0 2019년 4월 10일	30,1 KiB (minified & gzipped), 86 KiB (minified),[4] 283 KiB (uncompressed)[4]	MIT	JavaScript
jQWidgets	3.9.1 2015년 10월 29일	3102 KB (minified), 7486 KB (uncompressed)	Creative Commons Attribution-NonCommercial 3.0 and Commercial[5]	JavaScript, HTML, CSS
Knockout	3.5.0 2019년 2월 22일	66.4 KB minified / 309 KB (development mode)	MIT	JavaScript
MooTools	1.6.0 2016년 1월 14일	Variable; 7.3–65 KiB (YUI Compressor),[6] Variable; 7.3–65 KiB (YUI Compressor),[7] 101 KiB (uncompressed)[8]	MIT	JavaScript
Node.js			MIT	JavaScript
리액트 (자바스크립트 라이브러리)	16.1.1 2017년 11월 28일	react.production.min.js 6.41KB react-dom.production.min.js 92.4KB Total: 98.81KB	MIT	JavaScript
SAP OpenUI5	1.44.9 2017년 3월 28일	20.8MB (1.34.7 runtime, minified, zipped) 6.8MB(1.34.7 runtime mobile, minified, zipped) 52.1MB (1.34.7 SDK, zipped)	Apache 2[9]	JavaScript
Prototype & script. aculo.us[10]	Prototype: 1.7.3 2015년 9월 22일 script.aculo.us: 1.9.0 2010년 12월 23일	46–278 kB	MIT	JavaScript
qooxdoo	5.0.1 2015년 9월 15일	Variable, starting at 6 kB (gzipped)	GNU 약소 일반 공중 사용 허가서 & EPL	JavaScript
SmartClient & SmartGWT	SmartClient: 12.1 March 2020 SmartGWT: 12.1 March 2020	100–500 kb (gzipped).	GNU 약소 일반 공중 사용 허가서 & Commercial	Server: Java Client: Java (Smart GWT) or JavaScript (SmartClient) or XML (both)
SproutCore	1.11.2 2016년 5월 2일	250–700 kb (gzipped).	MIT	JavaScript
Svelte	3.12.1 2019년 10월 14일	Variable	MIT	JavaScript
Vue.js	2.6.10 2019년 3월 20일	33.5 KB (minified & gzipped) 91.48 KB (minified)[11] 333.46 KB (uncompressed)[11]	MIT	JavaScript
Wakanda	9 2014년 11월 14일	Variable	GNU 일반 공중 사용 허가서 (framework), AGPL (server) & Commercial	JavaScript + HTML + CSS
Webix	4.1 November 2016	188 kB (gzipped)	GNU 일반 공중 사용 허가서 & Commercial	JavaScript
ZK	8.0.1 2016년 1월 19일	Variable	GNU 약소 일반 공중 사용 허가서 & GNU 일반 공중 사용 허가서 & ZOL	XML + Java (JavaScript optional)

기능[편집]

	AngularJS	아파치 플렉스	Dojo	Ember.js	Enyo	Ext JS	구글 웹 툴킷	JQuery	jQWidgets	MooTools	OpenUI5	Prototype & script. aculo.us[10]	qooxdoo	SmartClient and SmartGWT	SproutCore	Svelte	Vue	Wakanda	ZK	Webix
Feature detection[12]	예		예[13]	예		예[14]	아니요[15][16]	예[17]	예	예[18]		아니요[19]	예	Partial [20]	예			Partial	아니요	예
DOM wrapped[21]	예		예	아니요	예	예	예	예		아니요[22]		아니요[23][24]	예	예	아니요			예	예	예
XMLHttpRequest data retrieval	예	예	예[25]		예	예	예	예	예[26]	예[27]	예	예	예	예	예			예		예
웹소켓			예[25]		예	예	예	예	아니요	예[27]	예[28]	예	예	예	Via Plugin			예		예[29]
푸시 기법 data retrieval			예[30]			예[31]	예[32]	예[30]	아니요					예[33]	Via Plugin				예[34]	예
Other data retrieval		Yes: XML, HTML, CSV, ATOM, AMF, JSON	Yes: XML, HTML, CSV, ATOM[35]			Yes: XML, SOAP, AMF, Ext.Direct	Yes: RPC, RequestFactory	Yes: XML, HTML	Yes: XML, JSON, CSV, TSV[26]	Yes: XML, HTML				Yes: XML, WSDL, RSS, and Java-based SQL, Hibernate, POJO adapters				Yes: JSON-RPC, Wakanda REST		Yes: XML, HTML, CS, JSON, JSArray, CSV
드래그 앤드 드롭		예	예[36]			예	플러그인을 사용하여 지원[37]	플러그인을 사용하여 지원[38]	예[39]	예[40]	예[41]	예	예	예	예			예	예	예[42]
Simple visual effects	예	예	예[43]		예	예	예	예	예	예[44]	예	예	예	예	예[45]			예	예	예
Animation / advanced visual effects	예		예[46]		예[47]	예	예	예	예	예[48]		예	예	예	예[45]			예	예	예[49]
Back button support / history management			예[50]	예	예[51]	예[52]	예	플러그인을 사용하여 지원[53]	아니요	플러그인을 사용하여 지원[54]		예	예	예	예				예	예
Input form widgets & validation	예	예	예[55]		예	예	예, Validation requires plugin[56]	플러그인을 사용하여 지원[57]	예[58]	예	예	예	예	예	예			예	예	예[59][60]
	AngularJS	아파치 플렉스	Dojo	Ember.js	Enyo	ExtJS	구글 웹 툴킷	JQuery	jQWidgets	MooTools	OpenUI5	Prototype & script. aculo.us[10]	qooxdoo	SmartClient and SmartGWT	SproutCore	Svelte	Vue	Wakanda	ZK	Webix
Grid		예	예[61]			예	예	플러그인을 사용하여 지원[62]	예[63]	플러그인을 사용하여 지원[64]	예		예	예	예			예[65]	예	예[66]
Hierarchical Tree		예	예[67]		예[68]	예[69]	예	플러그인을 사용하여 지원[70]	예[71]	플러그인을 사용하여 지원[72]	예		예[73]	예	예			예 (Auto Form)[74]	예	예[75]
Rich text editor	아니요	예	예[76]			예[77]	예	플러그인을 사용하여 지원[78]	예[79]	예[80]			예[81]	예	Via plugin			예[82]	예	예[83]
Autocompletion tools	아니요		예[84]			예	예	예[85]	예[86]	플러그인을 사용하여 지원[87]		예		예	플러그인을 사용하여 지원			예[88]	예	예
HTML generation tools	아니요		예[89]			예	예	예	예[79]	예[90]		예	예	예	예			아니요	예	예
Widgets themeable / skinnable		예	예[91]		예	예[92]	예[93]	예[94]		예	예	예		예	예				예	예
GUI resizable panels and modal dialogs		예	예		예	예	예	플러그인을 사용하여 지원	예[95]	예[96]			예	예	예			예[97]	예[98]	예
GUI page layout			예			예	예	플러그인을 사용하여 지원[99]	예[100][101]	예[96]			예	예	예			예[102]	예[98]	예[103]
Canvas support		예	예[104]		예	예	예	플러그인을 사용하여 지원[105]	예[106]	예[107]			예	예	예			예[108]	예[109]	예
Mobile/tablet support (touch events)	예	예	예[110]	예	예	예	플러그인을 사용하여 지원[111]	플러그인을 사용하여 지원[112]	예[113]	플러그인을 사용하여 지원[114]	예		예	예	예			예[115][116]	예[117]	예[118]
Accessibility / graceful degradation[119]	예		예[120]	아니요	예	예[121]	예[122]	예	예[123]	예			아니요[124]	Degradation: No Accessibility: Yes	Degradation: No Accessibility: Yes				예	예[125]
ARIA compliant			예[120]			예[121]		예[126]	예[123]		예		아니요	예	예				예	예[127]
Developer tools, Visual design			예[128][129]		in progress[130]	예[131][132][133]	예	예[134][135]	예[136][137][138]	예[139][140]			예[141]	예	아니요			예[142]	예	예[143][144]
Offline storage[145]		예	아니요[146]		예	예[147]	Via Google Gears[148]	플러그인을 사용하여 지원[149]	예[150]				예	예	예			planned	예	예
Cross-browser 2d Vector Graphics[151]			예[152]			예		플러그인을 사용하여 지원[153]	예[106]	예[154]				예	아니요]			예 (via Raphael)	예[109]	예 (via Raphael)[155]
Charting & Dashboard[156]		예	예[157]			예[158]		플러그인을 사용하여 지원[159][160]	예[161][162]					예	아니요			예[163]	예[164]	예[165]
RTL Support in UI Components		예	예			예		사용되는 플러그인에 따라	예[123]		예			예	예					아니요

브라우저 지원[편집]

프레임워크	인터넷 익스플로러	모질라 파이어폭스	Safari	Opera	Chrome	Edge
AngularJS (1.3)	8+ (9+)	4+	5+	11+	30+
아파치 플렉스	9 (Edge --> 10)	21	6	15	23
Dojo	6+	3+[166]	4[166]	10.50+[166]	3[166]
Ember.js	6+	3+	4+	10.6+	14+
Enyo	8+[167]	>4[167]	>5[167]		>10[167]
Ext JS	6+	3.6+	4+	11+	10+[168]
구글 웹 툴킷	8+	1+	5+	9+	1+
JQuery (3.x)	6+ (9+)[169]	2+[169]	3+[169]	9+[169]	1+[169]
jQWidgets	7+[170]	2+[170]	3+[170]	9+[170]	1+[170]
MooTools	6+	2+	3+	9+	1+
Prototype & script. aculo.us[10]	6+	1.5+	2.0.4+	9.25+	1+ (starting with 1.6.1RC3)
qooxdoo	6+	2+	3+	9+	2+
SmartClient and SmartGWT	6+	1+	3+	9+	1+
SproutCore	6+	3+	4+	9+	1+
Svelte		21+	6+	15+	23+	12+
Vue	10+	21+	6+	15+	23+	12+
Wakanda	9+	4+	5+		11+
ZK	6+	2.0+	3+	9+	2+
Webix	8+[171]	3+[171]	4+[171]	9+[171]	1+[171]

참조 : https://velog.io/@vrisel/JavaScript-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EB%B9%84%EA%B5%90

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC_%EB%B9%84%EA%B5%90