JAMstack 이해하기: Phil Hawskworth와의 인터뷰

JAMstack에 대해 들어본 적이 있고 WordPress에서 Hugo로 전환하는 방법에 대해 들어본 적이 있을 수도 있지만 JAMstack은 모든 종류의 프로젝트에 실행 가능한 옵션입니까?

저는 프론트엔드 엔지니어인 Phil Hawksworth와 이야기를 나눴습니다. 그는 (에이전시에서 9년 동안 일한 후 독립형 제품 작업으로 복귀했습니다) 이제 JAMstack 기술을 위한 전략 개발에 집중하여 웹용 빌드를 더 간단하고 빠르게 만들 수 있습니다. 안전한. Phil은 또한 7월 9-10일에 런던에서 정적 사이트 생성기, 서버리스 및 JAMstack 전용 컨퍼런스인 JAM_stack ldn을 공동 주최할 예정입니다.

Vitaly: 안녕하세요. Smashing Conf의 연사 및 일반적으로 좋은 사람들과의 대화 중 하나를 환영합니다. FTP가 큰 역할을 하던 시절을 기억할 수 있으며 실제로 FTP가 완벽하게 안전한 공간인 이유를 여전히 배포하고 있으므로 이에 대해 걱정할 필요가 없습니다. 그러나 더 이상 FTP를 사용하지 않고 대신 Git 기반 워크플로 및 아마도 지속적인 배포로 이동하는 변경 사항이 높습니다. 이 모든 멋진 휘파람과 종소리. 그래서 오늘 저는 실제로 Netlify에서 일하고 있는 Phil Hawksworth를 환영합니다. 개발자 관계[inaudible 00:10:00]. 안녕하세요 필입니다. 오늘 하루 어땠어요?

Phil: 잘 지내요. Vitaly는 어떻게 지내요? 만나서 반가워.

비탈리: 와, 잘하고 있어. 당신을 보는 것은 항상 즐겁습니다. 당신은 Netlify와 Jump Stack 및 모든 것을 스트리밍하는 햇살과 같습니다.

필: 노력합니다. 나는 낙인찍히지도 않았는데 얼마나 놓친 기회인가.

비탈리: 괜찮아, 괜찮아. 그러나 당신은 나에게 말해야 합니다. 그래서 그 보석이나 젠 또는 지트, 예를 들면, 젬? 젬인가요?

필: 잼. 잼입니다. 잼에 관한 모든 것입니다.

비탈리: 다 잼이야. 그래서 JAMstack. 개발자나 디자이너의 경우 실제로 이전에 이 용어를 들어본 적이 없습니다. 그것이 무엇인지, 왜 그것이 좋은지, 그리고 처음에 그것의 이점이 무엇인지 요약하고 싶다면. 기존의 오래된 스택에서 JAMstack으로 이동하려는 이유는 무엇입니까? 간단히 요약할 수도 있습니다.

Phil: JAMstack이라고 하는 것이 유혹적이기 때문에 시도해 볼 수 있는지 보겠습니다. JAM은 Javascript, API 및 모형을 의미합니다. 그러나 그 자체로는 그것이 무엇을 의미하는지 아는 것만으로는 그다지 많은 것을 설명하지 못합니다. 따라서 실제로 JAMstack은 원본 서버에 의존하지 않고 항상 활성 서버에 도달하는 요청에 의존하지 않는 웹사이트를 배포하고 제공하는 방법에 관한 것입니다.

Phil: 따라서 Linux, Apache, MySQL 및 PHP와 같은 LAMP 스택과 같은 스택이 더 익숙할 것입니다. JAMstack을 사용하면 서버에서 멀어지고 브라우저에 더 가깝게 레벨을 올렸기 때문에 조금 달라졌습니다. 따라서 가능한 한 빨리 브라우저에 액세스한 다음 브라우저의 기술을 사용하여 나중에 강화하고 보완하십시오. 따라서 JAMstack은 사이트를 사전 렌더링하고, 브라우저에 가져온 다음, 이를 개선하고, 확장하고, 브라우저에서 실행되는 Javascript에 대한 경험을 하고, API에 요청을 하는 등의 작업에 관한 것입니다.

Phil: 서버를 유지 관리하는 것이 어렵다는 것을 알기 때문에 유지 관리해야 하는 서버에서 벗어나려고 하는 모델입니다. 나는 당신에 대해 모르지만 몇 년 동안 그냥 내 등을 돌렸을 때 사라져 버린 종류의 사이트가 많이 있습니다. PHP를 업그레이드해야 했기 때문에 블루문에서 한 번 수행한 Linux 버전을 업그레이드해야 했습니다. 따라서 서버를 유지 관리하는 것은 어렵기 때문에 JAMstack의 아이디어는 사이트를 정적 자산으로 제공하는 것을 가능한 한 간단하게 만든 다음 브라우저의 모든 API와 기능을 최대한 활용하여 확장을 수행하고 더 많은 작업을 수행하는 것입니다. 거기에.

비탈리: 맞아요. 음, 사실, 우리는 2년 정도 전에 JAMstack으로 이사했습니다.

필: 2년?

Vitaly: 네, 저희에게는 꽤 긴 여정이었습니다. 그리고 물론, 우리는 그 과정에서 몇 가지 교훈을 배웠습니다. 하지만 본질적으로 모든 프로젝트가 JAMstack 등으로 일부를 이동하거나 이동함으로써 어떤 식으로든 이점을 얻을 수 있다고 말씀하시겠습니까? 한계가 어디 있다고 보십니까? 잠재적으로 모든 개발자가 프로젝트에서 사용할 수 있는 것입니까, 아니면 특정 웹사이트 그룹이나 프로젝트 그룹 전용으로 사용하는 것입니까?

Phil: 예, 내 말은, 오 예, 모든 것에 사용할 수 있지만 모든 기술에 대해 조심스럽게 말해야 한다고 생각합니다. 실제로 사용 사례를 선택하고 잘 맞춤화되었는지 확인해야 합니다. JAMstack 사이트에 대해 생각할 때 첫 번째 본능을 말하고 아마도 CDN에서 직접 정적 자산으로 제공되는 무언가에 대해 생각할 것입니다. 당신은 그것이 자주 변경되지 않는 사이트에 대해서만 좋은 것이라고 생각할 수도 있습니다. 그들은 인용에 인용되고 정적이며 변경되지 않습니다. 그러나 실제로는 배포 시 마찰을 줄일 수 있는 도구가 너무 많기 때문에 실제로는 그렇지 않습니다.

Phil: 원하는 경우 하루에 여러 번 또는 한 시간에 여러 번 배포할 수 있으며 실제로 이전보다 훨씬 더 역동적으로 느껴지도록 만들 수 있습니다. 따라서 적절하지 않다고 생각되는 사용 사례 중 일부는 다음과 같습니다. 그것들은 실제로 접히기도 합니다. JAMstack 모델이 사이트를 미리 생성할 수 있을 때 정말 의미가 있기 때문에 많은 페이지, 수십만 또는 수백만 페이지가 있는 사이트를 생성하는 경우가 어려울 수 있습니다. 따라서 정적 사이트 생성기를 사용하고 있을 수 있습니다. 그것들은 현재 유행하고 있습니다. 그것들은 정말로 정말로 인기가 있습니다.

Phil: 하지만 물론 업데이트를 배포할 때마다 몇 가지 작업을 수행해야 하므로 신문 사이트와 같이 수백만 페이지가 있는 사이트가 있는 경우 해당 사이트를 다시 생성하는 데 필요한 작업이 필요합니다. 꽤 오랜 시간이 걸릴 수 있으므로 JAMstack이 일종의 단순히 사용될 수 있는 한계에 부딪히기 시작할 때입니다. 당신은 아주 교활하지만 분명히 몇 가지 도전 과제를 소개하는 경우 약간 교활해지기 시작하여 그 문제를 해결하기 시작할 수 있습니다.

Phil: 예를 들어 Gatsby나 React Static 및 Hugo와 같은 다양한 정적 사이트 생성기에서 보기 시작한 것 중 하나입니다. 이러한 정적 사이트 생성기 뒤에 있는 팀은 페이지를 점진적으로 생성할 수 있는 방법을 탐색하기 시작했습니다. 즉, 변경될 때마다 전체 사이트를 다시 배포하거나 전체 사이트를 재생성하지 않고 방법을 찾으려고 시도합니다. 증분 빌드를 수행합니다. 그것은 극복하기 어려운 도전적인 문제이지만 현재 그 장벽을 허물고 시도하는 데 도움이 될 작업이 진행 중입니다. 그러나 확실히 현재로서는 수백만 페이지 또는 수십만 페이지가 있는 웹사이트에 JAMstack 사이트를 사용하는 방법을 찾는 것이 지금 당장은 조금 어려울 수 있습니다.

비탈리: 오, 흥미롭군요. 따라서 실제로는 현재 상태의 div를 제공한다는 생각과 기본적으로 새 포털처럼 구축해야 하는 것이 무엇이든 간에 페이지가 표시되어야 하므로 이러한 일이 발생하는 것을 보는 것이 흥미로울 것입니다. 당신은 또한 2주 전에 Jason Pamental의 기사에서 실제로 글꼴을 로드한 다음 필요한 첫 번째 페이지를 로드한 다음 두 번째를 로드한 다음 증분 글꼴 로드와 같이 새 글꼴을 만드는 방식으로 실제로 병합합니다.

필: 흥미롭네요.

Vitaly: 그것을 탐구하는 것은 정말 흥미로울 것입니다.

Phil: 네, 로딩이 너무 많은 것이 아니라 세대가-

Vitaly: 세대, 빌드 아웃.

필: 네, 맞습니다.

비탈리: 알겠습니다 . 하지만 대부분의 개발자가 겪는 공통적인 문제는 무엇이라고 생각하십니까? 글쎄요, 먼저 돌아가겠습니다. 이전에 JAMstack에서 작업한 적이 없고 LAMP 스택에 매우 편안하고 만족하며 JAMstack의 보안 및 성능과 같은 가능성과 이점을 탐색하고 싶을 수도 있습니다. 실제로 어떻게 시작하시겠습니까? 무엇을 이동하시겠습니까? 워크플로 변경은 무엇을 의미합니까?

Phil: 따라서 워크플로의 변경 사항은 실제로 상당히 심오할 수 있습니다. 왜냐하면 일반적으로 의존하는 많은 인프라를 제거하고 실제로 이를 제거하고 CDN에 직접 배포를 시작할 수 있다고 말하기 때문입니다. 그러나 누군가가 이것을 실험하기 시작하는 방법에 관해서는 이미 이것의 일부 측면을 사용하고 있을 가능성이 있습니다. 웹용으로 구축하는 전통적인 방식에서도 마찬가지입니다.

Phil: LAMP 스택에서 무언가를 구축할 수 있는 방법에 대해 생각한다면 PHP에 있을 가능성이 있습니다. 데이터 소스, 이 경우 MySQL 데이터베이스 또는 어떤 종류의 데이터 소스에서 데이터를 가져오는 템플릿을 작성하는 것과 같은 일을 하고 있는 것입니다. 데이터베이스의 이러한 항목을 보기에 렌더링한 다음 서비스를 제공합니다. 이는 정적 사이트 생성기가 작동하는 방식과 비슷합니다. 그들은 템플릿을 가지고 있고, 파일의 일종의 구조화된 데이터이거나 일종의 데이터베이스 또는 콘텐츠 API에 도달할 수 있는 어딘가에서 데이터를 가져옵니다. 어느 쪽이든, 데이터를 수집하고, 해당 데이터를 템플릿과 결합하고, 보기를 생성하며 유일한 차이점은 요청 시 수행하지 않고 미리 수행한다는 것입니다. 따라서 개발자를 위한 인지 단계의 논리적 단계 중 일부는 실제로 그렇게 크지 않을 수 있습니다.

Phil: 가장 큰 변화는 배포 방법에 대한 생각입니다. 실제로 배포하는 것은 배포를 원할 때마다 빌드되고 렌더링된 전체 자산이기 때문입니다. 콘텐츠 관리 및 코드 관리와 같은 것을 모두 같은 위치에 가져와서 비전과 같은 것이 이 모든 것을 함께 제어하기 시작합니다. 따라서 사이트와 그 안의 콘텐츠를 개발하고 관리하는 방법에 대해 약간 다른 방식으로 생각하기 시작합니다. 그래서 거기에 약간의 변화가 있습니다. 그러나 좋은 점은 많은 정적 사이트 생성기가 실험을 시작하기에 매우 간단할 수 있으며 좋은 점은 이를 수행하는 데 많은 인프라가 필요하지 않다는 것입니다. 따라서 좋은 점은 로컬 시스템에서 바로 빌드를 시작할 수 있다는 것입니다. 컴퓨터에서 바로 정적 사이트 생성기를 실행하고 있으며 다른 많은 인프라에 의존하지 않고도 결과가 어떻게 될지 정말 잘 알 수 있습니다.

Phil: 그런 종류의 첫 번째 단계인 진입로에서 "음, 이 특정 도구 세트를 사용해 보겠습니다. 로컬에서 실행할 수 있습니다.” 그리고 그 출력을 어딘가에 배포할 때 배포하는 위치가 로컬에서와 정확히 동일할 것이라는 확신을 가질 수 있습니다. 많은 인프라와 움직이는 부품에 의존하지 않기 때문에 정적인 렌더링을 좋아하는 이유 중 하나입니다. 자신의 머신에 있는 정적 서버에서 이를 보고 "예, CDN으로 이동할 때 작동하는 방식입니다."라고 생각할 수 있습니다.

Vitaly: 음-흠 (긍정적);예를 들어 우리가 단일 건물을 구축하는 방식을 살펴보면 인프라가 있으며 [00:10:07 불가], 무엇을 할 수 있는지에 대한 수많은 옵션이 있습니다. 서버를 위해, 클라이언트를 위해, 그리고 그 사이의 모든 것.

필: 네.

Vitaly: 그리고 제 생각에 우리의 경우에는 일종의 골격을 구축하고 있으며 콘텐츠와 모든 것이 포함된 CDI를 통해 곧바로 제공되고 Javascript로 향상되기 때문이라고 생각합니다. 그것은 실제로 꽤 합리적이고 꽤, 나는 쉽게 말할 수 없지만 그런 종류의 설정으로 이동하는 것이 합리적이었습니다. 결국 페이지에 남는 것은 콘텐츠일 뿐입니다. 몇 가지 주석 영역과 검색 상자 및 기타 몇 가지가 있는 HTML입니다. 그러나 정말로 독립 실행형 응용 프로그램으로 이동하는 경우 금융 응용 프로그램, 온라인 뱅킹, 이런 종류의 것일 수도 있습니다. 많은 논리를 요구하는 무언가가 있는 경우 JAMstack이 거기에서 고려하기에 좋은 옵션이라고 생각하십니까? 서버가 필요한지 아닌지?

Phil: 글쎄요, 저는 "그것은 상황에 따라 다릅니다"라는 오래된 표현을 사용하는 것을 싫어합니다. 그러나 그것은 종류에 따라 약간 다릅니다. 즉, 실제로 서비스 측 구성 요소가 있는 것만큼 Javascript 응용 프로그램처럼 잘 작동하는 응용 프로그램이 많이 있습니다. 나는 웹 개발에 관해서는 약간 구식이기 때문에 어느 정도 조심스럽게 말합니다. 나는 가능한 한 많은 것을 HTML로 브라우저에 넣은 다음 점진적으로 향상시키는 곳에서 정말 높은 워터마크를 갖는 것을 정말 좋아합니다. 에서. 그래서 저는 개인적으로 자바스크립트로 모든 것을 하고 빈 본문 태그를 전달한 다음 자바스크립트를 통해 모든 것을 실행하는 것을 좋아하지 않습니다.

Phil: 그런 말을 해도 완벽하게 받아들일 수 있는 경우가 있습니다. 물론 Javascript에 크게 의존하고 청중을 알고 있는 특정 종류의 응용 프로그램에 대해 생각하고 있다면. 그것은 완전히 합리적일 수 있습니다. 최근에 배송된 것들이 있습니다. 예를 들어 크롬 팀이 자바스크립트를 많이 사용하고 정적으로 아름답게 작동하는 게임을 만들기 위해 Google IO에 배송된 것을 실제로 생각하고 있습니다. 그것이 작동할 수 있는 많은 사용 사례가 있습니다.

Phil: 귀하의 재정적 사례로 돌아가서, 저는 사실 첫 직장에서 웹 기술을 사용하여 거래자들이 거래할 수 있도록 화면에 숫자를 표시하는 일을 했습니다. 이것은 웹 소켓 이전, Ajax 이전, 어떤 것보다 이전이었습니다. 그것은 당신이 그것을 하는 데 도움이 되었고 그것은 일종의 도전적이었지만 최근에는 자바스크립트에서 그런 종류의 일을 많이 하게 되었고 그것은 완벽하게 이해됩니다. 브라우저에서 바로 API에 대한 보안 요청을 시작할 수 있습니다. 이제 브라우저에서 직접 인증 및 권한 부여를 수행할 수 있는 모델이 많이 있습니다. 따라서 여러 가지 면에서 이러한 일부를 분리할 수 있는 방식으로 관리를 훨씬 더 쉽게 만들 수 있기 때문에 이러한 일부를 구축하려는 금융 기관의 스택을 단순화할 수 있습니다. 따라서 JAMstack 모델이 해당 시나리오에서도 완벽하게 작동할 수 있다고 생각합니다.

Vitaly: 좋습니다. 이제 JAMstack과 프런트 엔드의 세계를 탐험하기 위해 다시 올 수 있습니다. 요즘 가장 신나는 게 뭐야, 필? JAMstack과 프론트 엔드를 전반적으로 살펴보면, 아침에 잠에서 깨는 것이 정말 밤에 잠을 깨게 하는 것입니까? 언젠가는 내가 해낼 것이다. 당신은 [누화 00:13:33]이 있습니까?

Phil: 예, 그리고 이것은 이 세상이 너무 빨리 움직이는 것처럼 느껴지기 때문에 당신의 대답이 날마다 다를 수 있는 종류의 것입니다. 그리고 그 자체가 저를 매우 흥분시키는 것 중 하나입니다. 이제 우리는 브라우저 API가 실제로 발전하기 시작하고 직접 구현할 필요 없이 브라우저에서 직접 수행할 수 있는 종류를 보기 시작했습니다. 그것은 나에게 일종의 흥미 진진한 것입니다. 나는 SVG에 관해서는 여전히 매우 멍청합니다. duffer라는 단어를 설명해야 하는데, 영어가 아닌 사람이 이것을 보고 있다면 그것은 바보를 의미합니다. 그것은 내가 커브 뒤에 있다는 것을 의미합니다.

Phil: 하지만 SVG로 더 많은 일을 하고 싶어하는 제 자신을 발견했고 애니메이션은 제가 뒤처져 있는 종류의 일이고 그걸 가지고 놀고 싶습니다. 그러나 브라우저 API와 같은 것은 오프라인을 위한 것이든 성능을 개선하기 위한 것이든 특히 현재 글꼴 로드 방식이 점점 더 접근 가능해지고 있어 시각적으로 매우 풍부하고 더 가까운 것을 실제로 만들 수 있습니다. 타이포그래피로 만들고 싶은 것. 제가 그런 거에 좀 촌스러워서 그런 거 좋아해서 더 많이 가지고 놀고 싶어요.

Vitaly: Phil, 런던에서 열린 JAMstack conf에 대해 이야기하고 있습니다. 또한 그것이 무엇에 관한 것인지, 초점이 무엇이며 누구를 위한 것이며, 그곳에서 귀하의 역할은 무엇인지와 같은 몇 단어로 설명할 수 있습니까? 막 뒤에서 콘텐츠와 모든 것을 처리합니다. 거기에서 당신의 역할은 무엇입니까?

Phil: 그래서 저는 일에서 재미있는 부분을 가졌습니다. 그래서 나는 나가서 연사를 찾고 흥미로운 콘텐츠를 찾을 기회가 있었고 프로그램이 어떻게 결합되는지에 대해 정말 흥분됩니다. 프론트엔드 개발자에게 권한을 부여하는 것과 현재 이 JAMstack 모델을 기반으로 하는 프론트엔드 기술로 우리가 할 수 있는 일에 대해 이야기할 Chris Coia와 같은 사람들이 있습니다. Google Chrome 팀의 Jake Archibald 및 Surma와 같은 사람들이 프론트 엔드의 성능과 정적 호스팅이나 인프라 또는 바로 실행되는 코드를 사용하여 고성능 경험을 실제로 주도할 수 있는 방법에 대해 이야기할 예정입니다. 브라우저.

Phil: 우리는 또한 Yuna Kravitz가 CSS와 Houdini와 관련된 모든 것에 대해 이야기하도록 할 것입니다. 그리고 훨씬 더. 우리는 또한 JAMstack 모델이 조직과 프로젝트에 미칠 수 있는 문화적 변화와 관련된 것들에 대해 이야기할 것입니다. 그래서 나는 그것에 대해 약간 흥분합니다. 나는 이 사람들을 모두 소개할 기회를 가질 것입니다. 왜냐하면 그들이 저를 MC로 삼아 그들과 이야기하고 몇 가지 질문을 할 수 있다는 것을 의미하기 때문입니다. 따라서 프론트 엔드 개발에 관심이 있는 모든 사람과 웹에서 매우 효율적인 방식으로 프로젝트를 제공하는 새로운 모델에 관심이 있는 모든 사람에게 매우 흥미로울 것이라고 생각합니다.

Vitaly: 오, 무대에서 스포트라이트를 받는 걸 좋아하시죠?

Phil: 저는 관심을 추구하는 사람입니다. 지금쯤이면 알겠지, 비탈리.

비탈리: 오, 사실 난 항상 당신이 매우 겸손하고 착하고 친절한 사람이라고 생각했는데, 분명히 나는-

Phil: 행위입니다. 행위입니다.

비탈리: 알았어, 괜찮아. Phil, 우리는 내일 실제로 만나요.

Phil: 곧 다른 행사로 뵙겠습니다. 그렇지 않으면 7월, 7월 9일, 10일에 뵙겠습니다.

Vitaly: [inaudible 00:16:52] 따라서 이것을 염두에 두고 Phil에게 감사를 표하고 계약을 체결합니다. 모두들 안녕히 계세요.

필: 곧 ​​만나요.

랩입니다!

JAMstack의 라이브 세션과 함께 SmashingConf Toronto 2019에서 Phil을 환영하기를 고대하고 있습니다. 그곳에서도 뵙고 싶습니다!

이 일련의 인터뷰가 유용하다고 생각되면 누구와 인터뷰하고 싶은지 또는 어떤 주제를 다루기를 원하는지 알려주시면 바로 안내해 드리겠습니다!