by zzarcon

由zzarcon

使用Kakapo.js進行動態模擬 (Dynamic mocking with Kakapo.js)

3 months after the first commit, Kakapo.js reaches the first release and we are proud to announce that now it is ready to use. Let us introduce you Kakapo.

首次提交3個月后， Kakapo.js到達了第一個發行版，我們很自豪地宣布現在可以使用了。讓我們向您介紹Kakapo。

Kakapo - The next generation mocking framework in Javascript

Kakapo-Java的下一代模擬框架

Kakapo is just a set of tools that tries to make your life easier when building web apps, specially when creating client side mocks. It provides components and APIs which let you easily replicate your backend logic and responses in the client-side.

Kakapo只是一組工具，可在構建Web應用程序時使您的生活更加輕松，特別是在創建客戶端模擬時 。它提供了組件和API，使您可以輕松地在客戶端復制后端邏輯和響應。

This is nothing new and I’m quite sure you are familiar with tools like jquery-mockjax, FakeXMLHttpRequest or fetch-mock, those tools are great and have been there for quite a loot of time but in my opinion they are just one part of the solution of a big problem.

這并不是什么新鮮事，我敢肯定，您熟悉諸如jquery-mockjax ， FakeXMLHttpRequest或fetch-mock之類的工具，這些工具很棒，并且已經存在了很長一段時間，但在我看來，它們只是其中的一部分解決一個大問題。

Why should you care about client side mocking? To solve the Backend-Bottleneck.

您為什么要關心客戶端嘲笑？解決Backend-Bottleneck問題 。

后端瓶頸 (Backend Bottleneck)

Last sprint retrospective, after the third sprint in a row missing more than 50% of the planed points, we were starting to ask ourselves what was going wrong. Some back end devs were saying:

上次沖刺回顧，在連續第三次沖刺錯過了超過50％的計劃點之后，我們開始問自己出了什么問題。一些后端開發人員在說：

Yeah, we thought it was an easy task but we had to spend 1 week refactoring the current functionality to make it working as expected…
是的，我們認為這是一項輕松的任務，但是我們不得不花1周的時間來重構當前功能，以使其按預期工作……
Too much not planned stuff came out and we had to take care of those issues happening in production…
太多計劃外的東西出來了，我們不得不照顧生產中發生的那些問題……
Staging servers were not working at all and we had to re-deploy the service more than 5 times…
登臺服務器根本無法正常工作，我們不得不重新部署該服務超過5次…

On the other side, front end devs:

另一方面，前端開發人員：

I spent the whole Monday trying to figure out why the endpoint was returning 500 status code instead of getting the expected response…
我花了整個星期一試圖弄清楚為什么端點返回500狀態代碼而不是得到預期的響應…
We were building the user profile but the create endpoint was not documented, so we couldn’t make it for the release…
我們正在構建用戶個人資料，但未記錄創建端點，因此我們無法在發布中使用它…
Yesterday I had to switch too many times within different staging environments that I didn’t had time to work on the feature…
昨天，我不得不在不同的登臺環境中切換太多次，以至于我沒有時間來使用該功能……

I was very frustrated about the current situation and, specially, not being able to ship a small feature in the estimated time. It took me quite some time to realize that it was not a backend or client problem: the issue was something deeper and would require more time and effort to be fixed.

對于當前的情況，我感到非常沮喪，特別是無法在預計的時間內發布小功能。我花了相當多的時間才意識到這不是后端或客戶問題：這個問題更深層次，需要花費更多時間和精力來解決。

What about not dealing with backend issues and staging environments but instead building the feature based on a JSON response agreed with the backend team beforehand?

不處理后端問題和暫存環境，而是根據事先與后端團隊同意的JSON響應來構建功能，該怎么辦？

Let’s see a basic example to get an idea of how it works:

讓我們看一個基本的例子，以了解其工作原理：

In the example above we are just defining a couple of endpoints and one factory, then we define some business logic inside the request handlers in order to return the fake responses. To do this we use three key elements of Kakapo:

在上面的示例中，我們僅定義了兩個端點和一個工廠，然后在請求處理程序中定義了一些業務邏輯，以便返回假響應。為此，我們使用了Kakapo的三個關鍵要素：

Router: Kakapo’s router recognizes URLs (routes) and dispatches them to the associated handlers. It also provides a request object as argument that gives you useful information about the incoming request.
路由器 ：Kakapo的路由器識別URL(路由)，并將其分派到關聯的處理程序。它還提供了一個請求對象作為參數，為您提供有關傳入請求的有用信息。
Database: This class along with factories and relationships allows you to define how your entities should be represented and their behaviors.
數據庫 ：該類與工廠和關系一起使您可以定義應如何表示實體及其行為。
Server: It connects all other components and lets you activate or deactivate them; this feature gives you the ability to switch between multiple databases and routers, we call this scenarios.
服務器 ：它連接所有其他組件，并允許您激活或停用它們；此功能使您能夠在多個數據庫和路由器之間切換，我們將其稱為“ 方案” 。

現實生活中的客戶端嘲笑 (Client side mocking in real life)

Usually mocking APIs is done by creating a static JSON for every single request and testing against it. Creating and maintaining the JSON is a repetitive task and error-prone.

通常，通過為每個請求創建靜態JSON并對其進行測試來完成模擬API。創建和維護JSON是一項重復性任務，容易出錯。

Kakapo, instead, lets you dynamically mock your responses by defining how they should look like and automatically serialize them into JSON.

相反，Kakapo允許您通過定義響應的外觀來動態模擬響應，并自動將其序列化為JSON。

As an example, let’s try to make a CRUD

例如，讓我們嘗試制作CRUD

That’s how easy is to replicate a CRUD with Kakapo, you might also take a look at fake data and serializers to see some goodies of Kakapo.

用Kakapo復制CRUD很容易，您還可以查看偽數據和序列化程序，以了解Kakapo的一些優點。

技術挑戰 (Technical challenges)

Besides all the stuff we have learned in the process of building the library, I would like to point out some of the most challenging things we had to face:

除了我們在構建庫的過程中學到的所有東西之外，我還要指出一些我們必須面對的最具挑戰性的事情：

攔截器 (Interceptors)

The interceptors components are the ones in charge of intercepting the user request, check if matches any of the routes and apply the mock, they are designed in such a pluggable way that the user can define his owns. Currently we are supporting the browser networking APIs, XMLHttpRequest and fetch but soon we will support Node.js ?.

攔截器的組件是負責攔截用戶請求，檢查是否匹配任何路由并應用模擬的組件，它們以可插入的方式設計，用戶可以定義自己的。當前，我們支持瀏覽器網絡API， XMLHttpRequest和fetch，但不久之后我們將支持Node.js？。

Reinventing the wheel is not implicitly bad. You can learn a lot doing it.

重新發明輪子并不是很壞。您可以學到很多東西。

I found this component complicated because you have to replicate the same functionality that the browser APIs provides, as soon as you behave a bit differently, the application might break since it depends on the native behavior. You can learn a lot while building this stuff directly with native APIs instead of using wrappers like jQuery, because you will really understand how it internally works.

我發現此組件很復雜，因為您必須復制瀏覽器API提供的相同功能，一旦行為有所不同，應用程序可能會中斷，因為它取決于本機行為。在直接使用本機API而不是像jQuery這樣的包裝器直接構建這些東西時，您可以學到很多東西，因為您將真正了解它的內部工作原理。

While implementing the interceptors we had to make sure to not break popular networking libraries like jQuery and Superagent; we created integration tests to ensure that Kakapo will continue to work as expected after introducing new changes.

在實現攔截器時，我們必須確保不要破壞流行的聯網庫，例如jQuery和Superagent ；我們創建了集成測試 以確保Kakapo在進行新更改后將繼續按預期工作。

測試中 (Testing)

Testing is a must when developing software, but is even more critical in open source projects that other developers will potentially use. We always had this in mind while creating Kakapo and this was the first project I ever did in a strict TDD way. I have to admit that the feeling I had at the beginning was way different than the one I have now. Sometimes I felt that writing so many tests was slowing us down, but now with high code coverage, I feel really confident when I have to refactor a critical component or add a new feature to the library.

在開發軟件時，測試是必須的，但在其他開發人員可能使用的開源項目中，測試則更為關鍵。在創建Kakapo時，我們始終牢記這一點，這是我有史以來以嚴格的TDD方式進行的第一個項目。我必須承認，我一開始的感覺與我現在的感覺有很大不同。有時，我覺得編寫這么多的測試會拖慢我們的腳步，但是現在有了高代碼覆蓋率，當我必須重構關鍵組件或向庫中添加新功能時，我感到非常有信心。

This is something you have to introduce in your workflow incrementally and define with the team. Since this was the biggest open source project I ever worked on, I learned how to coordinate and work with a team. Sometimes things need to be discussed twice or more just to make sure that all the members are on the same page, but at the end is going to work out.

您必須在工作流程中逐步引入并與團隊一起定義。由于這是我從事過的最大的開源項目，因此我學會了如何與團隊協調和合作。有時需要討論兩次或更多次，以確保所有成員都在同一頁面上，但最后要進行工作。

文件的重要性 (Importance of documentation)

Developers hate writing documentation. Unfortunately, it is as important as having a good library and will be the first thing your users and contributors will see.

開發人員討厭編寫文檔。不幸的是，它與擁有一個好的庫同樣重要，并且將是您的用戶和貢獻者首先看到的。

Think about it this way: you have been building your library for some months and now is finally ready, don’t you think it is worth the effort to spend some days building a website and writing some good examples?

這樣考慮：您已經建立了幾個月的圖書館，現在終于可以使用了，您認為花幾天時間建立一個網站并編寫一些好的示例值得您付出嗎？

This is a talk from React Europe 2016 in which Christopher Chedeau explains how Facebook deal with spreading open source libraries.

這是來自React Europe 2016的一個演講，克里斯托弗·切多( Christopher Chedeau)在演講中解釋了Facebook如何處理傳播的開源庫。

杰基爾 (Jekyll)

Jekyll literally saved us, it improved the way we write documentation and the velocity. Before choosing Jekyll, I used to build static websites with some css and html to then place there the docs. However, some developers might not be fluent and miss the simplicity of Markdown. That’s why we decided to go for Jekyll which lets you write your pages in Kramdown (markdown with steroids) and is integrated with Github Pages.

Jekyll從字面上拯救了我們，它改善了我們編寫文檔的方式和速度。在選擇Jekyll之前，我曾經用一些CSS和html構建靜態網站，然后將文檔放置在那里。但是，有些開發人員可能不會流利，會錯過Markdown的簡單性。這就是為什么我們決定選擇Jekyll的原因，它可以讓您用Kramdown編寫頁面(類固醇的降價)，并與Github Pages集成。

Once we felt comfortable with the status of the docs and the examples, we also wanted to give a good first impression to newcomers. We created a script which fetches the md file from the github page, adds some content and outputs the readme ?

一旦我們對文檔和示例的狀態感到滿意，我們還希望給新手一個良好的第一印象。我們創建了一個腳本，該腳本從github頁面獲取md文件 ，添加了一些內容并輸出了自述文件？

演示應用 (Demo Apps)

Everyone likes demos, they show what your library does and how it does it. It might sound weird, but it will also help you to learn how to use your own library, as well as finding bugs or missing features.

每個人都喜歡演示，他們演示了您的庫做什么以及如何做。聽起來可能很奇怪，但是它也將幫助您學習如何使用自己的庫，以及發現錯誤或缺少功能。

Until we built our first todo app using Kakapo we didn’t realize about the major pain points and how to solve them, that’s why we later built our second demo app, a github explorer.

直到我們使用Kakapo構建了第一個todo應用程序之前，我們才意識到主要的難點以及如何解決它們，這就是為什么我們后來構建了第二個演示應用程序(一個github Explorer)的原因。

Having a good library without documentation is like having rocket that nobody knows how to use it.

擁有一個沒有文檔的好的圖書館就像擁有一個沒人知道如何使用它的火箭一樣。

路線圖 (ROADMAP)

The project just started but we have ambitious plans for it; feel free to check the open issues or open new ones, we will really appreciate it! Here are some of the most important:

這個項目剛剛開始，但是我們有雄心勃勃的計劃。隨時檢查未解決的問題或發現新的問題，我們將非常感謝！以下是一些最重要的信息：

Full JSON API serializer support
全面的JSON API序列化程序支持
Node.js interceptors support
Node.js攔截器支持
Async handlers support
異步處理程序支持

We are also working hard to finish the Swift version of Kakapo which is almost ready for the beta phase and we think is going to be a game changer to build iOS applications: stay tuned! ?

我們也正在努力完成Kakapo的Swift版本，該版本幾乎已經可以進入Beta測試階段，我們認為它將成為構建iOS應用程序的顛覆者：敬請期待！？