Hoodie 소개: 프론트엔드 개발자를 위한 전체 스택 개발

아직 Hoodie에 대해 들어보지 못했다면 확인해야 합니다.

Hoodie는 프론트엔드 개발자를 위한 진보적인 새 라이브러리로, 앱 개발과 사용자 경험 모두를 변화시킬 수 있는 몇 가지 주목할 만한 새로운 철학을 채택합니다. Hoodie는 프론트엔드 개발자와 사용자 경험 전문가의 손에 전체 스택, 프론트엔드 앱 개발에 대한 제어 권한을 부여하여 때때로 백엔드 개발자의 불가사의한 기술적 이의로부터 그들을 해방시킵니다. 또한 Hoodie 앱은 중단 없는 연결의 족쇄에서 사용자를 해방시켜 사용자가 이동 중에도, 공중에서 또는 바다 속에서도 걱정 없이 앱을 사용할 수 있도록 합니다.

플랫폼은 아직 초기 단계에 있지만 게임에서 앞서나가고자 하는 모든 프론트엔드 개발자에게 시도해 볼 가치가 있는 강력한 새 도구를 이미 제공하고 있습니다. Hoodie 뒤에 있는 팀은 CouchDB, Async, Mustache.js 등과 같은 매우 성공적인 프로젝트에서 작업한 입증된 배경을 가지고 있습니다.

Hoodie의 전체 스택 개발 라이브러리가 작업 중인 내용에 대해 배우고 프로젝트에 대해 매우 흥분한 후, 직접 사용해 보기로 결정했습니다. Hoodie에 대해 조금 더 이야기하고 멋진 앱을 개발할 수 있는 가능성을 보여드리겠습니다.

후드티는 무엇인가요?

먼저 후드티가 무엇인가요? 뭐가 그렇게 대단한거야? Hoodie는 하나의 전체 스택 개발 패키지에 여러 강력한 새 패러다임을 결합한 오픈 소스, 완전 자바스크립트 플랫폼 및 API로, Hoodie 앱을 빌드하는 개발자와 이러한 앱과 상호 작용하는 최종 사용자 모두에게 이익이 됩니다. 이러한 개념 중 가장 중요한 것은 API 구축을 위한 "Dreamcode"로 알려진 강력한 커뮤니티 주도 프로세스와 함께 "noBackend" 및 "Offline First" 운동입니다.

백엔드 없음

Hoodie는 훌륭한 프론트엔드 앱 개발의 열쇠는 앱을 멋지게 만들고 즐겁게 사용할 수 있는 방법을 알고 있지만 백엔드 기술에 너무 자주 제약을 받는 사용자 경험 전문가와 개발자의 손에 있다고 믿습니다. 그들이 통제할 수 없다는 것입니다. 사용자 가입/로그인, 데이터 저장 또는 이메일 발송과 같이 영원히 존재해 온 기본적인 서버 상호 작용은 모든 새 앱에 대해 시간 소모적인 사용자 정의 구현을 계속 요구하므로 프론트 엔드 개발자는 새로운 백엔드를 배우고 코딩해야 합니다. 매번 기발함을 끝내십시오.

Hoodie는 백엔드를 완전히 추상화하여 프론트엔드 디자이너와 개발자의 손에 제어권을 다시 부여합니다. Hoodie 프론트 엔드 앱 개발을 사용하면 서버 측을 걱정하는 대신 Hoodie에 내장된 간단하고 배우고 구현하기 쉬운 프론트 엔드 API만 걱정하면 됩니다. 예를 들어, 새 사용자를 등록하시겠습니까? 이것은 한 줄의 코드로 수행할 수 있습니다.

 hoodie.account.signUp(username, password);

이것은 Hoodie가 전적으로 전념하는 noBackend 이니셔티브의 이면에 있는 아이디어입니다. noBackend는 백엔드 개발자가 필요하지 않음을 의미합니다! Hoodie 백엔드를 서버에 배포 하고 잊어버리십시오 .

Hoodie는 전적으로 JavaScript로 작성되었습니다. 자체 포함된 백엔드는 Apache CouchDB와 함께 Node.JS를 데이터베이스로 사용합니다. 이 글을 쓰는 시점에서 Hoodie가 이미 구현한 핵심 기능에는 사용자 가입 및 관리, 데이터 로드, 저장 및 이메일이 포함됩니다. 이러한 핵심 기능은 Node.js 플러그인을 추가하여 쉽게 확장할 수 있습니다.

드림코드

Hoodie는 무엇보다도 API입니다. 이것이 noBackend를 가능하게 만드는 것입니다. Hoodie의 구현은 시간이 지남에 따라 변경 및 개선될 수 있지만 개발자에게 제공되는 인터페이스는 동일하게 유지되므로 걱정할 필요가 없습니다.

Hoodie는 여전히 빠르게 성장하고 있으며 항상 새로운 기능이 추가되고 있습니다. Hoodie는 다른 noBackend 프로젝트와 마찬가지로 커뮤니티 중심 접근 방식을 사용하여 Dreamcode라는 API를 설계합니다. 기본적으로 작성하고 싶은 코드를 구상하고 커뮤니티에서 충분한 지원을 받으면 Hoodie가 구현합니다.

Hoodie API를 설계하기 위한 이 API 우선의 크라우드 소싱 접근 방식은 Hoodie 코드가 작성하기 쉽고 읽기가 쉽다는 것을 의미합니다. 그것은 당신의 꿈의 코드입니다!

오프라인 우선

Hoodie는 Dreamcode 기반의 noBackend API를 사용하여 프런트 엔드 앱 개발자의 많은 문제를 해결합니다. 그러나 Hoodie의 주요 목표 중 하나는 사용자의 주요 문제인 연결에 대한 의존도를 종종 해결하는 것입니다.

모바일 앱이 있는 모바일 장치로의 전환이 계속됨에 따라 데스크톱 기반의 지속적인 연결에 대한 가정은 변함이 없습니다. 지금까지 어디를 가든 인터넷이 있을 것이라는 약속이 있었습니다. 오늘날까지 연결 끊김은 비정상적인 것으로 간주되어 사용자가 다시 온라인 상태가 될 때까지 모든 작업을 수행할 수 없습니다. 그러나 우리 모두가 알고 있듯이 통신 네트워크는 이 약속을 지키지 못했습니다. 연결성은 비행기, 지하철, 시골길 및 기타 수많은 상황에서 창밖으로 나옵니다. 그리고 그것은 세계의 선진국에 있습니다! 지구의 광대한 지역에서 안정적인 인터넷 액세스는 규칙의 드문 예외입니다.

오프라인 퍼스트 운동은 이 단순한 삶의 사실과의 우아한 조화를 추구합니다. Offline First를 사용하면 비연결은 응용 프로그램의 또 다른 정상적인 상태입니다. 사실 그것은 기본 상태입니다! Hoodie는 이 철학을 열정적으로 받아들입니다. API 뒤에는 임시 로컬 스토리지의 전체 프론트 엔드 구현과 연결을 사용할 수 있을 때마다 자동으로 단계적으로 동기화되는 기능이 있습니다.

Hoodie를 사용하면 연결에 대해 걱정할 필요 없이 댓글을 게시하고, 이메일을 보내고, 계정을 편집하고, 기타 대부분의 일상 활동을 할 수 있습니다. 전체 스토리지 및 동기화 시스템은 데이터 손실에 대한 두려움 없이 언제든지 중단될 수 있습니다.

물론 이 모델에는 고유한 설계 과제와 접근 방식이 포함되어 있지만 Hoodie 팀은 이러한 과제를 해결하기 위한 기술을 개척하고 있습니다.

Offline First는 도입 초기 단계에 있는 흥미롭고 새로운 앱 개발입니다. 필요한 기술을 개발하려면 아직 해야 할 일이 많이 있습니다. Hoodie가 어떻게 작동하는지 보려면 여기를 살펴보세요.

Hoodie를 사용한 간단한 앱

Hoodie를 프론트 엔드 개발 도구로 사용하는 방법을 보여주기 위해 커뮤니티 구성원이 자신의 이벤트를 만들고 다른 엔지니어가 찾아보고 일정에 추가할 수 있도록 게시할 수 있는 간단한 앱을 작성하기로 결정했습니다. 여기에서 목표는 Hoodie를 시연하는 것이며 프로덕션 준비가 된 앱을 제공하는 것이 아닙니다. 내 GitHub 페이지에서 코드를 찾을 수 있습니다.

덮개 아래 Hoodie는 본질적으로 NodeJS로 구축된 서버 측과 클라이언트 측 JavaScript 라이브러리의 조합입니다. 간단한 설치 및 배포 프로세스 외에도 앱에서 작업하는 개발자는 클라이언트 측 코드에서만 작업합니다. 내장 라이브러리는 개발자가 작동 방식에 대해 알지 못하는 상태에서 서버 측과 통신할 수 있습니다.

앱에서 서버에서 사용자 지정 작업을 수행해야 하는 경우 어떻게 해야 합니까? 우리는 항상 Hoodie 플러그인을 만들 수 있습니다. 다음은 플러그인에 대한 추가 정보입니다.

Hoodie 앱 시작하기

모든 Hoodie 앱의 전체 스택 개발을 위한 첫 번째 단계는 Hoodie 명령줄 도구를 사용하여 시작하는 것입니다.

 hoodie new toptalCommunity

이렇게 하면 이미 일부 코드가 있는 초기화된 Hoodie 앱이 생성되고 이미 앱을 실행할 수 있습니다! 우리가 입력하면

 cd toptalCommunity hoodie start

브라우저에서 Hoodie 팀의 샘플 앱이 열립니다.

나는 이 시점에서 약간의 하우스키핑을 했다. Hoodie 앱은 현재 Bootstrap 및 Prism과 함께 제공되지만 제공된 버전은 제외했습니다. 나는 Prism이 필요하지 않았고 내가 사용하고 싶은 글꼴과 JS를 사용할 수 있도록 내 고유 버전의 Bootstrap을 사용하고 싶었습니다. 또한 앱을 빌드할 때 자체 스타일을 부여하고 간단한 부트스트랩 템플릿을 허용하기 위해 main.css를 약간 변경했습니다. DOM 조작 및 이벤트에만 jQuery를 사용했습니다. Hoodie는 다른 모든 것을 처리합니다.

후드티와 드림코드

이 샘플 앱을 만드는 동안 나는 Hoodie로 작업할 때의 모든 이점을 빠르게 깨달았습니다. 프로젝트를 시작할 때 대답해야 하는 일반 질문이 너무 많았습니다. Hoodie 덕분에 코드를 작성하고 앱이 작동하고 작동하는 모습을 볼 수 있었습니다.

사용자 계정 관리를 위해 어떤 전략을 사용해야 합니까? Hoodie 계정 플러그인이 답입니다. 백엔드에 데이터를 어떻게 저장해야 합니까? Hoodie의 간단한 스토리지 API가 이를 처리하여 Offline First 기능을 무료로 제공합니다! 이 Hoodie 앱이 오프라인에서 작동하도록 하기 위해 노력할 필요가 없었습니다. 그냥 작동합니다.

구현에 대해 조금 더 자세히 살펴보겠습니다.

사용자 계정 관리

Hoodie에는 hoodie-plugin-users 라는 계정 관리를 담당하는 플러그인이 있습니다. API는 더 간단할 수 없습니다.

새 사용자를 어떻게 추가합니까?

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

사용자는 어떻게 로그인합니까?

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

로그인한 사용자가 있습니까?

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

이것은 정말 간단할 수 없습니다. 아 잠깐만, 우리 UI는 이 모든 것에 어떻게 반응할까요? Hoodie에는 이벤트가 준비되어 있습니다.

사용자가 로그인할 때 반응합니다.

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

데이터 저장고

샘플 앱을 사용하면 사용자가 자신의 이벤트(비공개 데이터)를 만들고 원하는 경우 게시(데이터 공개)하여 다른 사용자가 이벤트에 참여할 수 있습니다.

Hoodie를 사용하면 로그인하지 않고도 로컬 스토어에 데이터를 추가할 수 있습니다. 그렇다면 이 데이터가 속한 사용자를 어떻게 알 수 있을까요? 글쎄, 그것은 로컬을 유지하고 해당 사용자가 로그인할 때까지 서버에 동기화되지 않습니다. Hoodie는 또한 해당 사용자만 해당 데이터에 액세스할 수 있는지 확인합니다.

작동 방식은 다음과 같습니다.

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

간단합니다! 좋습니다. 그러면 이벤트를 만드는 데 도움이 됩니다. 다른 사람들과 어떻게 공유할까요? 여기에서 global share plugin 이 도움이 될 것입니다. 기본 플러그인이 아니므로 설치해야 합니다.

 hoodie install global-share

이제 플러그인이 준비되었으니 사용해보자! 사용자 저장소에 이미 추가한 데이터를 글로벌 저장소에 게시해야 합니다.

 hoodie.store.findAll('event').publish();

이렇게 하면 이 사용자에 대해 저장된 모든 이벤트를 공개로 플래그 지정하여 글로벌 저장소를 쿼리할 때 해당 데이터를 결과로 얻습니다.

 hoodie.global.findAll('event'); //This is read-only

내 이벤트 페이지에서 사용자는 글로벌 스토어에 직접 게시되는 이벤트를 생성할 수 있습니다.

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish(); 

게시된 이벤트는 모든 사람이 볼 수 있으므로 이제 모든 사용자가 이벤트 페이지에서 생성된 이벤트를 볼 수 있습니다.

그렇다면 공개되어서는 안 되는 데이터는 어떻습니까? 사용자가 적용한 이벤트를 저장하고 이벤트 페이지에 표시합니다. 사용자가 적용 버튼을 클릭하면 다음과 같이 실행됩니다.

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

아래 두 개의 스크린샷은 동시에 실행되는 두 개의 브라우저 창을 보여줍니다. 첫 번째 브라우저에서 사용자는 A Event 에 지원한 사용자 a@aa 로 로그인합니다. 두 번째는 사용자 b@bb 가 로그인하여 B Event 에 응모한 것입니다.

긴 폴링

Hoodie에서 제공하는 일부 이벤트를 구독하면 긴 폴링과 같은 기술을 투명하게 사용할 수 있습니다. 이 기술은 다양한 사용자가 사용하고 공동 작업할 때 애플리케이션에 흥미로운 기능을 제공합니다.

이것은 정말 하기 쉽습니다. 샘플 앱에서 한 줄로 트릭이 완료되었습니다.

 hoodie.global.on('add:event', loadEvent);

이 간단한 줄은 다른 사용자가 추가했을 수 있는 새 이벤트를 확인하고 이를 내 이벤트 페이지에 추가하기 위해 서버를 폴링하는 긴 시간을 처리합니다.

몇 가지 우려 사항

Hoodie 및 프론트엔드 앱 개발 기능을 사용하기 위해 이 샘플 앱을 빌드한 후 제공해야 하는 기능에 대해 매우 기대하고 있습니다. 그러나 몇 가지 분명한 문제가 눈에 띄었습니다.

Hoodie를 사용하면 개발자가 서버와 매우 쉽게 통신할 수 있으므로 모든 개발자가 콘솔을 사용하여 데이터베이스에 항목을 추가할 수 있습니다. 이는 보안 및 데이터 무결성에 중요한 영향을 미칩니다.

라이브러리에는 데이터 유효성 검사, 연결 가능한 URL, 테스트 프레임워크, 데이터의 비공개 공유와 같이 프로덕션 앱에 필요한 많은 필수 사항이 여전히 누락되어 있습니다. 지금 프로덕션에서 Hoodie를 사용하려면 AngularJS, Ember 또는 Front-End 프로젝트에 대해 적절하게 구조화되고 유지 관리 가능한 JavaScript 코드가 있는지 확인하는 데 도움이 되는 다른 많은 솔루션과 페어링해야 합니다. 이러한 프레임워크 자체가 요즘 백엔드 기술의 복잡성에 접근하고 있기 때문에 이 솔루션은 Hoodie의 목적을 크게 무너뜨릴 것입니다.

후드티의 미래

Hoodie는 이러한 모든 문제를 해결하기 위해 여전히 많은 개발을 진행하고 있습니다. 팀은 새로운 기능을 구현하고 기존 기능을 개선하여 대량 소비에 대비한 플랫폼을 만들기 위해 열심히 노력하고 있으며, 물론 이 프로세스에는 시간이 걸립니다. 지금 새로운 본격적인 앱을 계획하고 있다면 이번에는 이를 구축할 다른 플랫폼을 찾는 것이 좋습니다.

그러나 그 사이에 내가 방금 시연한 것처럼 Hoodie를 사용하여 프론트엔드 앱 개발을 시작하기에는 너무 이르지 않습니다. Hoodie에는 이미 강력하고 새로운 아이디어가 많이 내장되어 있으며 매우 인기가 있을 것으로 생각합니다. 이러한 것들로 게임을 앞서가는 것은 아마도 나쁜 생각이 아닐 것입니다.

Hoodie의 팀이 계속 노력한다면 API는 즉시 황금 시간대에 준비될 것입니다. Hoodie 팀의 진행 상황을 추적하려면 이정표 추적기를 살펴보십시오.

Hoodie는 무버와 셰이커를 위한 훌륭한 앱을 쉽게 개발할 수 있도록 약속합니다. Hoodie가 구현한 아이디어가 마음에 든다면 모든 새 프로젝트에 백엔드 개발자 팀이 필요하지 않다는 사실을 알게 될 것입니다. 이와 같은 프로젝트를 통해 머지 않은 미래에 프론트엔드 개발자의 황금기를 상상하기 쉽습니다. 마찬가지로 Offline First가 사용자에게 제공하는 이점은 인터넷 자체가 가지 않는 곳으로 모바일로 연결된 라이프스타일의 범위를 확장하여 접근성을 위한 거대한 단계입니다.

Hoodie로 이동하여 Hoodie의 진행 상황을 확인하고 Hoodie가 도입할 준비 중인 흥미진진한 새로운 변화의 일부가 되십시오.

Hoodie 팀에 특별한 감사 를 드립니다. Hoodie 오픈 소스 프로젝트의 허가를 받아 사용된 Hoodie 로고