Ember.js

Ember.js
Ember.js
Ember.js logo
원저작자예후다 카츠
개발자엠버 코어 팀
초기 릴리즈2011년 12월 8일, 10년 전(2011-12-08)
안정된 릴리스
4.6.0[1] / 2022년 7월 25일; 9일 전 (2022년 7월 25일)
저장소Ember.js 저장소
기입처자바스크립트
운영 체제크로스 플랫폼
유형자바스크립트 라이브러리
면허증.MIT 라이선스[2]
웹 사이트emberjs.com

Ember.js는 컴포넌트 서비스 패턴을 사용하는 오픈 소스 JavaScript 웹 프레임워크입니다.개발자는 이를 통해 일반적인 관용어, 모범 사례 및 다른 단일 페이지 애플리케이션 생태계 패턴의 패턴을 [3]프레임워크에 통합하여 확장 가능한 단일 페이지 웹 애플리케이션을 만들 수 있습니다.

Ember는 HashiCorp, DigitalOcean, Apple Music, Square, Inc., Intercom, Addression, Groupon, LinkedIn, Live Nation, Ghost, Nordstrom 및 [4][5][6][7]Twitch를 포함한 많은 인기 웹사이트에서 사용되고 있습니다.주로 웹의 프레임워크로 간주되지만, 하이브리드 [8][9][10]앱 패턴을 활용할 경우 Ember에서 데스크톱 및 모바일 애플리케이션을 구축할 수도 있습니다.Ember 데스크톱 애플리케이션의 가장 주목할 만한 예는 iTunes 데스크톱 애플리케이션의 [11]기능인 Apple Music입니다.Ember 상표는 Tilde Inc.[12]가 소유하고 있습니다.

철학 및 설계

Ember는 처음부터 몇 가지 주요 아이디어를 중심으로 설계되었습니다.

야심찬 웹 응용 프로그램에 집중
Ember는 클라이언트측 어플리케이션 문제에 대한 포괄적인 해결책을 제공하기 시작했습니다.
개봉 즉시 생산성 향상
Ember는 개발 스택을 제공하기 위해 함께 작동하는 도구 세트의 구성 요소 중 하나입니다.Ember CLI는 애드온을 [13][14]포함한 애플리케이션 구조 및 빌드 파이프라인을 제공합니다.
정체 없는 안정성
이는 하위 호환성이 중요하며 프레임워크를 [15]혁신하고 발전시키면서 유지될 수 있다는 생각입니다.
미래 웹 표준 전망
Ember는 약속, 웹 컴포넌트, ES6 [16][17]구문 등 JavaScript와 웹에 관한 표준을 채택한 기업입니다.Ember의 공동 설립자 중 한 명인 Yehuda Katz는 TC39의 멤버로, 이 위원회는 JavaScript [18]언어의 향후 버전을 담당합니다.

Ruby on Rails와 마찬가지로 Ember는 Configuration(CoC)과 Don't repeat yourself(DRY) [19]원칙을 따릅니다.그것은 매우 [20]융통성 있게 만들어진 매우 독단적인 프레임워크로 묘사되어 왔다.

기본 개념

Ember는 5가지 주요 [21]개념으로 구성됩니다.

루트
Ember에서는 응용 프로그램 상태는 URL로 표시됩니다.각 URL에는 사용자에게 표시되는 것을 제어하는 대응하는 루트 오브젝트가 있습니다.
모델
모든 경로에는 애플리케이션의 [22]현재 상태와 관련된 데이터를 포함하는 관련 모델이 있습니다.윈도우를 사용할 수 있을 때.서버에서 JSON 개체를 로드하고 이러한 개체를 모델로 사용하는 경우 대부분의 응용 프로그램은 Ember Data와 같은 모델 라이브러리를 사용하여 이를 처리합니다.
템플릿
템플릿은 응용 프로그램의 HTML을 구축하기 위해 사용되며 HTMLBARS 템플릿 언어로 작성됩니다.(HTMLBARS는 문자열이 아닌 DOM 요소를 구축하는 핸들바의 변형입니다.)[23]
구성 요소들
구성 요소는 사용자 정의 HTML 태그입니다.동작은 JavaScript를 사용하여 구현되며 외관은 HTMLBARS 템플릿을 사용하여 정의됩니다.컴포넌트는 데이터를 "소유"합니다.또한 중첩될 수 있으며 작업(이벤트)을 통해 상위 구성 요소와 통신할 수 있습니다.폴리머와 같은 다른 컴포넌트 라이브러리도 Ember와 [24]함께 사용할 수 있습니다.
서비스
서비스는 사용자 [25]세션 등의 긴 수명 데이터를 보관하기 위한 싱글톤 객체일 뿐입니다.

Ember는 의존관계 주입, 선언적인 단방향 데이터 흐름, 추적된 속성 및 템플릿 [26]자동 업데이트도 제공합니다.

Ember 소프트웨어 스택

Ember.js는 Ember 코어 팀이 구축 및 지원하는 완전한 프론트 엔드 스택의 컴포넌트 중 하나입니다.

Ember CLI

Ember-cli는 구성보다 규칙을 적용하여 툴을 구축하는 것을 목표로 합니다.브로콜리를 기반으로 한 명령줄 유틸리티, 명령어 실행ember new <app-name>는 기본 [27]스택으로 새로운 Ember 앱을 생성합니다.이 기능은 다음과 같습니다.

  • 표준 파일 및 디렉토리 구조.
  • 라이브 새로고침 기능이 있는 개발 서버.
  • 테스트 [28]프레임워크
  • 종속성은 [29]npm을 통해 관리됩니다.
  • ES6/ES7+ 구문 지원(Babel 사용).
  • 자산 관리(결합, 최소화 및 버전 [30]관리 포함)

기타 기능은 다음과 같습니다.

  • Blueprint - 응용 프로그램에 필요한 모델, 컨트롤러, 구성 요소 등을 생성하기 위한 코드 생성기입니다.커스텀 Blueprint도 [31]생성할 수 있습니다.
  • Ember [32]CLI 기능을 확장하는 기능을 제공하는 애드온.Addon을 입력하여 설치할 수 있습니다.ember install <addon-name>CoffeeScript, LESS, Sass,[34] Compass 및 Mocha용 애드온을 포함하여 현재[33] 2,000개 이상의 애드온을 이용할 수 있습니다.

엠버 데이터

대부분의 Ember 어플리케이션에서는 Object-Relational Mapping(ORM;[35] 객체 관계 매핑)의 많은 기능을 제공하는 데이터 영속성 라이브러리인 Ember Data를 사용합니다.단, Ember Data [36]없이 Ember를 사용할 수도 있습니다.

Ember Data는 클라이언트 측 모델을 서버 측 데이터에 매핑합니다.그런 다음 특정 규칙을 [38]따르는 경우 [37]JSON API 사양을 구현하는 RESTful JSON API를 통해 설정 없이 레코드 및 이들의 관계를 로드 및 저장할 수 있습니다.단, 어댑터와 애드온을 [39]사용하여 구성도 가능하며 서버와 연동할 수 있습니다.JSON API에는 PHP, Node.js, Ruby, Python, Go, 를 위한 서버 라이브러리가 구현되어 있습니다.NET 및 Java.[40]Java-Spring 기반 서버로의 접속도 [41]문서화되어 있습니다.

Ember Data의 첫 번째 안정 버전(Ember 자체에 맞게 1.13 레이블로 표시됨)은 2015년 [42]6월 18일에 출시되었습니다.

엠버 인스펙터

Ember Inspector는 현재 Mozilla Firefox 및 Google Chrome 웹 브라우저에서 Ember [43][44]응용 프로그램을 디버깅하기 위해 사용할 수 있는 확장 기능입니다.기능에는 현재 렌더링된 템플릿, 컴포넌트 및 뷰 보기, 바인딩 및 계산된 속성을 계산하는 UI를 사용하여 Ember 개체의 속성 보기, 콘솔에서 [45]응용 프로그램 개체에 액세스할 수 있는 기능이 있습니다.Ember Data를 사용하면 각 모델에 대해 로드된 기록도 볼 수 있습니다.

  • Object Inspector를 사용하면 Ember Objects and Classes의 런타임 내용을 보고 편집할 수 있습니다.
  • 뷰 트리는 렌더링된 Ember 응용 프로그램의 구조를 시각적으로 표시합니다.
  • [ Routes ]탭에서는 라우터 상태와 루트를 나타내기 위해 사용되는 URL을 판별 및 추적할 수 있습니다.
  • 데이터 탭에는 응용 프로그램의 모델과 각 모델에 대해 로드된 레코드가 표시될 수 있습니다.
  • [ Info ]탭에는 의존관계 버전이 표시됩니다.
  • 권장 해제 탭에서는 예외를 트리거하지 않는 권장 해제 경고의 스택 추적을 가져올 수 있습니다.
  • [ Promise ]탭에서는, 비동기 조작을 개입시켜 코드를 추적할 수 있습니다.
  • 컨테이너 탭은 로드된 개체를 확인하는 데 사용됩니다.
  • [ Render Performance ]탭은 Ember 어플리케이션의 속도가 느려지는 원인을 판별하기 위한 것입니다.

고속 기동

Fastboot은 Ember 코어 팀이 작성한 Ember CLI 애드온으로 Ember 개발자는 Node.js에서 앱을 실행할 수 있습니다.이 기능을 통해 최종 사용자는 HTML 및 CSS를 즉시 볼 수 있으며 JavaScript는 백그라운드에서 다운로드되고 완전히 [46]로드된 후 인계됩니다.

리퀴드 파이어

Liquid Fire는 Ember [47]어플리케이션용 애니메이션을 지원합니다.기능에는 노선 간 및 단일 노선 내 모델 간 애니메이션 전환이 포함됩니다.뷰 레이어 구현 상세와는 완전히 분리된 공간 루트 관계를 확립하기 위한 DSL을 제공합니다.예를 들어,[48] 새로운 화면이 브라우저의 한쪽 가장자리에서 미끄러져 들어오도록 화면 전환을 애니메이션으로 만드는 것이 있습니다.

릴리스 프로세스

릴리스의 전체 목록 및 자세한 changelog에 대해서는 릴리스 블로그를 참조하십시오.

릴리스 사이클

Ember는 Google [49]Chrome의 빠른 출시 주기에서 영감을 얻어 6주간의 출시 주기를 따릅니다.

Ember 2.0부터는 핵심 팀이 지원하는 관련 프로젝트들이 릴리즈를 조정하여 Ember [50]자체와 버전 번호를 공유합니다.

업그레이드 및 하위 호환성

Ember는 시멘틱버전 관리 [51]규칙을 따릅니다.특히 변경은 1.0, 2.0 등의 메이저버전 번호에서만 발생합니다.포인트 릴리스(1.1, 1.2...)에서 새로운 기능을 추가할 수 있으며, 기능이 권장되지 않지만 공개 API에 대한 변경은 없습니다.업그레이드 [52]프로세스를 간소화하기 위해 툴링도 2015년에 개발되었습니다.

이 프로세스와 더불어 2.0 릴리스로의 업그레이드와 관련된 문제를 완화하기 위해 다음과 같은 여러 단계가 수행되었습니다.

  • 실제로 모든 주요 2.0 기능은 업그레이드로 인한 많은 문제를 줄이기 위해 초기에 도입되어 여러 릴리스에 분산되어 있습니다.
  • 제거된 대부분의 기능은 여전히 애드온을 통해 사용할 수 있습니다.

이 프로세스는 스태그네이션 없는 안정성이라는 Ember의 핵심 원칙을 따르고 있으며 Angular와 같은 유사한 프로젝트의 업그레이드 계획과 현저한 대조를 보입니다.JS.[53]

장래의 발전

프로젝트 현황은 핵심 팀 회의록을 [54]통해 추적할 수 있습니다.그러나 Ember에 대한 주요 변경은 Request For Comment 프로세스를 [55]거칩니다.이것은 엠버 커뮤니티에 새로운 제안에 대한 피드백을 줄 기회를 준다.주요 RFC는 다음과 같습니다.

  • 엔진엔진을 사용하면 사용자의 관점에서 여러 개의 논리 애플리케이션을 하나의 애플리케이션으로 구성할 수 있습니다.현재 실험용 애드온으로 [56][57]출시되어 있습니다.
  • 릴리스 사이클 개선.특히 사용되지 않는 [58]기능을 제거하는 "슬레 빌드"를 지원하기 위해 Ember CLI에 대한 변경을 제안합니다.
  • 아웃렛 포커싱디폴트로는 Ember에 액세스 할 수 있도록 합니다.이 RFC는 화면 [59]리더를 사용하는 사용자의 사용자 경험을 향상시키는 것을 목적으로 합니다.

역사

2011년 12월에는 애플리케이션 프레임워크와 SproutCore 1.0 [60][61]위젯 라이브러리 간의 혼동을 줄이기 위해 SproutCore 2.0 프레임워크의 이름이 Ember.js로 변경되었습니다.이 프레임워크는 jQuery, Ruby on Rails 및 SproutCore 핵심 팀의 멤버인 Yehuda Katz에 의해 만들어졌습니다.Katz의 다른 많은 프로젝트와 마찬가지로 구성보다 관례를 옹호합니다.

코퍼레이트 스폰서십

엠버즈는 앵귤러JS(구글), 리액트(페이스북) 등 한 주요 기업의 지원을 받는 다른 프로젝트와 달리 다양한 스폰서를 보유하고 있다.여기에는 [62][63]모두 프레임워크 사용자인 Yahoo!, LinkedIn 및 Busle이 포함됩니다.

레퍼런스

  1. ^ "Release 4.5.0". 25 July 2022. Retrieved 29 July 2022.
  2. ^ "ember.js/LICENSE". GitHub. Retrieved 27 April 2017.
  3. ^ Aghassipour, Alexander; Chacko, Shajith (30 Nov 2012). "Enterprise Apps Are Moving To Single-Page Design". TechCrunch.
  4. ^ http://libscore.com/? #엠버
  5. ^ "Building With Ember.js at Groupon". TalentBuddy. Retrieved 15 Oct 2015.
  6. ^ "Discourse-Built with Ember.js". GitHub. Retrieved 15 Jul 2015.
  7. ^ "Intercom".
  8. ^ "Ember-Write Once, Run Everywhere". GitHub. 5 Jul 2015.
  9. ^ "Build better desktop apps with Ember". SpeakerDeck. 5 Jul 2015.
  10. ^ "Wicked Good Ember 2015 talk - Build better desktop apps with Ember, video". 5 Jul 2015.
  11. ^ "Built with ember - Apple Music". BuiltWithEmber. Retrieved 21 Jul 2016.
  12. ^ "Ember.js: Legal". emberjs.com. Retrieved 2019-02-14.
  13. ^ "Ember CLI". Retrieved 15 Dec 2018.
  14. ^ "Ember Addons". Retrieved 15 Dec 2018.
  15. ^ Asay, Matt (4 November 2014). "Innovating Fast And Slow: EmberJS Insists, "We Don't Need To Break The Web"". ReadWrite. Retrieved 18 Jun 2015.
  16. ^ "JavaScript Promises". Mozilla. Retrieved 18 Jun 2015.
  17. ^ "Web Components". WebComponents. Retrieved 18 Jun 2015.
  18. ^ "TC39: Members". TC39Wiki. Retrieved 18 Jun 2015.
  19. ^ "What we've learnt from Ember.js after 2 months developing our new product". Solid. 16 December 2014. Retrieved 3 November 2015.
  20. ^ "Top Reasons Why Industry Experts Use Ember.js And How You Can Adopt It Yourself". TalentBuddy. Retrieved 14 October 2015.
  21. ^ Frank Treacy. "5 Essential Ember 2.0 Concepts You Must Understand". EmberIgniter. Archived from the original on 27 July 2016. Retrieved 31 August 2015.
  22. ^ "Ember.js - Models: Introduction". Emberjs. Retrieved 21 Jan 2014.
  23. ^ Jackson, Robert. "HTMLBars". GitHub. Retrieved 18 February 2015.
  24. ^ "How To Add Polymer To Your Ember Project". ProgramWithErik. 27 March 2015. Retrieved 11 Aug 2015.
  25. ^ "Ember Services Tutorial". ProgramWithErik. 26 July 2015. Retrieved 27 July 2015.
  26. ^ Bango, Rey (14 Mar 2013). "Getting Into Ember.js". Nettuts+.
  27. ^ "Ember CLI". Retrieved 15 Dec 2018.
  28. ^ "Ember testing". Retrieved 15 Dec 2018.
  29. ^ "Ember CLI-managing dependencies". Retrieved 15 Dec 2018.
  30. ^ "Ember CLI asset compilation". Retrieved 15 Dec 2018.
  31. ^ "Ember CLI Blueprints". Retrieved 15 Dec 2018.
  32. ^ "Ember CLI Writing Addons". Retrieved 15 Dec 2018.
  33. ^ "Ember Addons directory". emberobserver.com. Retrieved 15 Dec 2018.
  34. ^ "Ember CLI Overview". Retrieved 15 Dec 2018.
  35. ^ "Ember Data README". GitHub. Retrieved 4 Dec 2013.
  36. ^ "Ember without Ember Data". Evil Trout. 23 March 2013. Retrieved 2 Jan 2014.
  37. ^ "JSON API specification". Retrieved 16 Jun 2015.
  38. ^ "Ember.js Models". Emberjs. Retrieved 26 Jun 2015.
  39. ^ "Ember Observer-Data". EmberObserver. Retrieved 16 Jun 2015.
  40. ^ "JSON API implementations". JSON API. Retrieved 26 Jun 2015.
  41. ^ "Integrating Ember.js with the Spring Framework". SpringEmber. 20 August 2014. Retrieved 26 Jun 2015.
  42. ^ "Ember Data 1.13 release". 18 June 2015. Retrieved 18 Jun 2015.
  43. ^ "Firefox Addons - Ember Inspector". Mozilla. Retrieved 5 August 2015.
  44. ^ "Chrome Web Store - Ember Inspector". Chrome Web Store. Retrieved 18 Feb 2014.
  45. ^ "Ember Inspector". Ember.js. Retrieved 28 Jun 2015.
  46. ^ "Inside Fastboot. Faking the DOM in node". Emberjs. 8 January 2015. Retrieved 19 June 2015.
  47. ^ "Liquid Fire: Animations & Transitions for Ember Apps". GitHub. Retrieved 19 June 2015.
  48. ^ "Animations in Ember.js with liquid-fire". airpair.com. Retrieved 10 July 2015.
  49. ^ "New Ember release process". 6 September 2013. Retrieved 19 June 2015.
  50. ^ "Ember Project at 2.0". 16 June 2015. Retrieved 19 June 2015.
  51. ^ "Ember API Freeze". 18 January 2013. Retrieved 19 June 2015.
  52. ^ "Ember Watson Addon". Retrieved 19 June 2015.
  53. ^ "Angular 2.0 announcement". 29 October 2014. Retrieved 19 June 2015.
  54. ^ "Ember core team meeting minutes". Emberjs. Retrieved 5 Jul 2015.
  55. ^ "Ember RFC process". Emberjs. Retrieved 18 Jun 2015.
  56. ^ "Ember Engines". EmberAddons.com. Retrieved 19 Jan 2016.
  57. ^ "Engines". Emberjs. Retrieved 3 Feb 2015.
  58. ^ "Refining the Release Process RFC". Emberjs. Retrieved 18 Jun 2015.[영구 데드링크]
  59. ^ "Outlet Focusing RFC". Emberjs. Archived from the original on 24 September 2016. Retrieved 18 Jun 2015.
  60. ^ "SproutCore 2.0 becomes Ember.js". The H. 13 Dec 2011.
  61. ^ "Amber.js (formerly SproutCore 2.0) is now Ember.js". yehudakatz.com. 12 Dec 2011.
  62. ^ "Ember sponsors". Emberjs. Retrieved 18 Jun 2015.
  63. ^ "Interview with Mike North, Principal Software Engineer, Yahoo". Emberweekend. Retrieved 10 Aug 2015.

추가 정보

외부 링크