우리는 웹 개발을 위해 특별히 제작 된 온라인 IDE 인 StackBlitz입니다. 이번 주 Google I / O 기조 연설에서 우리를 살짝 엿 보셨을 것입니다.
오늘 우리는 Next.js 및 Google 팀과 함께 작업해온 새로운 기술을 발표하게 되어 기쁩니다.
몇 년 전 우리는 웹이 주요 변곡점으로 향하고 있음을 깨달았습니다. WebAssembly 및 새로운 기능 API의 출현으로 브라우저 내에서 Node.js를 실행할 수 있을 만큼 강력한 WebAssembly 기반 운영 체제를 작성할 수 있게 되었습니다. 우리는 로컬 환경을 설정할 필요 없이 원활한 코드 협업을 가능하게 하기 위해 로컬 환경보다 더 빠르고 안전하며 일관된 우수한 개발 환경을 구상했습니다.
이것은 어마 어마하게 들렸다. 그러나 이제 웹이 그래픽 디자이너, 비디오 편집기 및 풍부한 문서 편집을 위한 완전한 환경을 실행한다면 개발자가 웹을 사용하여 웹을 구축하는 것이 마침내 가능할까요?
우리는 그것을 시도하기로 결정했습니다. 우리는 최선을 바랐고 최악을 기대했습니다. 2 년 후 (시간이 흘러가는 ?), 그 결과는 예상치 못하게 경이로운 모습을 보였습니다.
오늘 우리는 WebContainers를 발표하게 되어 기쁩니다.
WebContainers를 사용하면 단 한 번의 클릭으로 밀리 초 내에 부팅 되고 즉시 온라인 및 링크 공유가 가능한 풀 스택 Node.js 환경을 만들 수 있습니다. 환경은 VS Code의 강력한 편집 경험, 전체 터미널, npm 등으로 로드 됩니다. 또한 브라우저 내에서 전적으로 실행되므로 몇 가지 주요 이점이 있습니다.
다시 말하지만 이러한 환경은 원격 서버에서 실행되지 않습니다. 대신 각 환경은 웹 브라우저 내에 완전히 포함됩니다. 맞습니다. Node.js 런타임 자체가 사상 처음으로 브라우저 내에서 기본적으로 실행됩니다.
StackBlitz.com에서 직접 시도하거나 아래의 시작 프로젝트 중 하나를 클릭하여 사용해 볼 수 있습니다.
브라우저에서 Node.js 프로젝트를 밀리 초 단위로 부팅합니다 (깜박이지 마세요!).
오늘 출시 된 WebContainers는 현재 공개 베타 상태입니다. 현재 지원에는 Next.js, GraphQL 및 Vanilla Node.js가 포함되며 지원을 확장하기 위해 추가 오픈 소스 프로젝트와 협력하고 있습니다. (우리와 함께 일하고 싶다면 repo를 확인하십시오).
왜?
로컬 환경을 설정하는 것은 엄청난 일입니다. 특히 멋진 아이디어의 프로토 타입을 빠르게 만들고, 새로운 오픈 소스 라이브러리를 사용해보고, 버그 재현을 만들거나, 동료와 공동 작업하려는 경우 ( "이 브랜치를 로컬에서 정말 빠르게 확인할 수 있습니까?" ? "?). 이 문제는 웹 개발이 Next.js와 같은 풀 스택 SSR 및 SSG 툴체인으로 이동함에 따라 그 어느 때보다 흔합니다.
버그 재생산을 위해 사용자가 제출 한 코드를 실행하는 것도 오픈 소스 유지 관리자와 Fortune 100 대 기업 모두에게 주요 보안 위험이 되고 있으며 이러한 유형의 공급망 공격이 증가하고 있습니다.
StackBlitz는 브라우저에 내장 된 수십 년 간의 속도 및 보안 혁신을 활용하여 이러한 문제를 해결합니다. StackBlitz의 모든 계산은 브라우저 보안 샌드 박스 내에서 즉시 이루어지며 로컬 컴퓨터로 분리 될 수 없습니다. 이 모델은 또한 몇 가지 주요 개발 및 디버깅 이점을 제공합니다 (자세한 내용은 잠시 후).
Code Spaces / Sandbox / Repls / ...는 어떻습니까?
레거시 온라인 IDE는 원격 서버에서 전체 개발 환경을 실행하고 결과를 인터넷을 통해 브라우저로 다시 스트리밍 합니다. 이 접근 방식의 문제점은 보안 이점이 거의 없고 거의 모든 면에서 로컬 머신보다 더 나쁜 경험을 제공한다는 것입니다. 컨테이너를 가동하는 데 몇 분이 걸리고, 네트워크 지연이 발생하기 쉬우며, 오프라인으로 작업 할 수 없으며, 종종 네트워크 시간 초과가 발생합니다. 고정 / 깨진 컨테이너를 디버깅 하는 것은 거의 불가능하며 새로 고침을 누르면 손상된 컨테이너에 다시 연결됩니다.
브라우저의 성능을 최대한 활용하십시오.
Chrome DevTools로 원활한 Node.js 디버깅.
브라우저는 자바 스크립트 디버깅에 정말 능숙합니다. 놀랍게도 알아요;) 브라우저 내에서 Node.js를 실행함으로써 Chrome DevTools와의 통합이 즉시 작동합니다. 설치, 확장, 브라우저에서 바로 네이티브 백엔드 디버깅 :
서버를 실행하십시오. 브라우저에서.
네, 사실입니다. WebContainers에는 브라우저의 ServiceWorker API에 매핑 된 가상화 된 TCP 네트워크 스택이 포함되어있어 오프라인 상태에서도 계속 작동하는 온 디맨드 라이브 Node.js 서버를 즉시 생성 할 수 있습니다. 브라우저 보안 샌드 박스 내에서 전적으로 실행되기 때문에 서버 응답은 localhost (!)보다 지연 시간이 적고 localhost 스크래핑 공격으로부터 웹 서버를 보호합니다.
제로 풋 프린트. 밀리 초 단위로 부팅됩니다.
브라우저는 Javascript 및 WebAssembly를 실행하는 데 매우 빠릅니다. 이를 활용하여 서버 리소스를 사용하지 않고 컴퓨터에 node_modules 블랙홀을 생성하지 않는 인스턴트 개발 OS를 만듭니다.
모든 페이지 로드시 새로운 환경.
안녕, rm -rf node_modules! WebContainer의 내장 npm 클라이언트는 매우 빠르기 때문에 모든 페이지 로드에서 새로 설치를 실행하여 매번 깨끗한 환경을 얻을 수 있습니다. 환경에 문제가 발생하면 다른 웹 앱과 동일한 방식으로 깨끗한 상태로 돌아갈 수 있습니다. 새로 고침 버튼을 누르세요.
제로 레이턴시. 오프라인으로 작동합니다.
재택 근무 피벗이 우리에게 무언가를 가르쳐 준 경우 네트워크 오류가 발생하는 경우가 많습니다. ISP는 다운됩니다. StackBlitz를 사용하면 기차를 타든 비행기를 타든 비가 내리는 뒷좌석에 있든 상관없이 인터넷 연결 없이 계속 작업 할 수 있습니다.
기본적으로 안전합니다.
StackBlitz의 새로운 컴퓨팅 모델을 사용하면 코드 실행의 100 %가 브라우저 보안 샌드 박스에서 발생합니다. 그 결과 로컬보다 훨씬 빠르고 덜 제한적인 개발 환경을 제공하는 동시에 매우 드문 조합 인 훨씬 더 많은 보안을 제공합니다.
사실, 기본 보안 태세는 매우 견고하여 임베디드 패키지 관리자는 5 년 전에 Sam Saccone이 발견 한 긴 해결되지 않은 npm 취약점을 해결하는 최초의 공개 도구입니다.
잠시 멈춥니다.
이것은 이야기가 정말로 마음이 구부러지는 곳이기 때문입니다.
'웹'앱과 '네이티브'앱의 차이점은 무엇입니까? Chrome 팀은 이 격차를 줄이기 위해 새로운 기능 API를 제공하고 있으며 델타는 빠르게 0에 가까워지고 있습니다.
데스크톱 등급 편집. 즉시 데스크톱 앱 설치.
Chrome의 PWA 기능 덕분에 StackBlitz를 설치하는 것은 클릭 한 번으로 간단합니다. 몇 밀리 초 후에 도크에서 실행할 수 있는 데스크탑 IDE가 생깁니다. CMD + W 및 CMD + T "그냥 작동"과 같이 일상적인 생산성을 위해 사용하는 키 바인딩. 또한 로컬에서와 마찬가지로 완전히 별도의 창에서 개발 서버를 열고 디버깅 할 수 있습니다.
로컬 파일 시스템에서 읽고 씁니다.
Chrome 팀은 최근에 File System Access API를 출시했습니다. 이를 통해 PWA는 로컬 파일 시스템의 일부에 대한 지속적인 읽기 및 쓰기 액세스를 요청할 수 있습니다. StackBlitz WebContainers와 함께 사용하면 node, npm, git, VS Code 또는 하드 드라이브에 설치된 다른 항목이 필요 없는 잠재적 인 미래를 암시합니다. 웹 브라우저만 있으면 됩니다.
무엇 향후 계획?
우리는 사용자 기반에 완전한 호환성을 제공하고 핵심 WebContainer 기술을 안정화 하기 위해 오픈 소스 유지 관리자와 협력하면서 다음 분기 또는 2 분기를 베타 버전으로 보내고 있습니다. 그 이후에 올 것은 완전한 기능을 갖춘 StackBlitz v2입니다.
다음과 같이 할 수 있다면 좋지 않을까요?
Develop. Preview. Ship. ♾️
또한 Vercel 및 Next.js와의 파트너십의 표면을 거의 긁기 시작했습니다. 지금까지 본 적이 없는 원활한 개발 환경을 준비하십시오 (여기에서 조기 액세스 권한을 얻으십시오).
소프트웨어 개발의 미래는 밝습니다.
아직 해야 할 일이 많이 남아 있지만, 이제 우리는 node, npm, git 및 VS Code의 로컬 인스턴스가 없는 미래가 실질적인 가능성이라고 자신 있게 말할 수 있으며, 전 세계 소프트웨어가 이전에는 불가능했던 곳에서 실행될 수도 있습니다.
Cloudflare Workers와 같은 플랫폼 또는 iPad에서 기본적으로 전체 개발 환경의 에지에서 WebContainer를 실행할 수 있는 미래를 상상해보십시오. 좋아하는 VS Code 확장을 실행하거나 WASI를 통해 브라우저에서 Python, Java 또는 R과 같은 웹이 아닌 기본 언어를 실행하는 것은 어떻습니까? 아직 밝혀 내고 해결해야 할 미지의 사항이 많이 있지만 우리는 이 기술에 대한 미래 기회가 엄청나다고 믿습니다.
이것들은 약간 미친 것처럼 보일 수 있습니다. 그리고 알려지지 않은 많은 것이 있습니다. 그러나 우리는 이 새로운 미래가 기회를 가질 만하다고 생각합니다. 누가 압니까? 예기치 않게 경이로울 수 있습니다.
https://blog.stackblitz.com/posts/introducing-webcontainers/
등록된 댓글이 없습니다.
