beam_建筑beam管第二部分前端

beam

Hello again 👋 and welcome to part two of this series talking about how we build beampipe.io, a privacy-conscious and fun alternative to Google Analytics.

再次您好👋，欢迎阅读本系列的第二部分，讨论我们如何构建beampipe.io ，这是一种注重隐私且有趣的Google Analytics(分析)替代方案。

In part one we talked about backend so naturally it’s now time for us to turn to frontend. I’ll start with a confession — I am not by skill or by inclination a frontend developer. Don’t get me wrong, I’ve written a lot of frontend code over the years (perhaps I’m just in denial) but it’s normally been about getting something built rather than more careful crafting. I’d say that’s changed a little in the last few years as frontend tooling has improved drastically. Seriously, if you are a backend engineer looking to get your feet wet, no time like the present.

在第一部分中，我们自然地谈到了后端，现在是时候转向前端了。 我将从坦白开始-我不是出于技巧或意愿而开发前端开发人员。 不要误会我的意思，多年来，我已经写了很多前端代码(也许我只是在否认)，但这通常是要构建一些东西，而不是精心设计。 我想说，随着前端工具的显着改进，过去几年中这种情况有所改变 。 认真地讲，如果您是一个后端工程师，想弄湿自己的脚，那没有比现在更适合的时间了。

打字稿+ React (Typescript + React)

Anyway back to the subject, what tools are we using and why. Let’s start with some easy decisions. It’s probably not an understatement to say that I like static types. The stronger the type system the better. Particularly with web development, I find this drastically reduces the number of mistakes I make (typos in variable names or wrong usage of APIs being particularly common problems). So without a very compelling reason not to, I start every project with Typescript.

无论如何，回到主题上，我们使用什么工具，为什么使用。 让我们从一些简单的决定开始。 说我喜欢静态类型可能不是轻描淡写。 类型系统越强越好。 特别是在Web开发中，我发现这可以大大减少我犯的错误(变量名中的打字错误或API的错误使用是特别常见的问题)。 因此，在没有非常令人信服的理由的情况下，我以Typescript开始每个项目。

The other easy pick for me is React. This is pragmatic more than principled. I’m sure Vue and Angular and Alpine.js are all great in their own ways but as a lone developer I’ve got enough plates spinning already so I pick something simple which I now know relatively well.

对我来说，另一个容易选择的是React 。 这比原则更务实。 我确信Vue和Angular和Alpine.js各自都有不错的表现，但是作为一个单独的开发人员，我已经拥有足够的旋转板，因此我选择了一些比较容易理解的简单方法。

https://en.wikipedia.org/wiki/Lambda_cube https ://en.wikipedia.org/wiki/Lambda_cube

NextJS (NextJS)

Like a lot of modern applications, Beampipe’s UI is mostly a single page application (SPA). This means that your browser typically downloads a blob of javascript which dynamically manipulates the content of the webpage to show the UI and effect transitions between pages. This is a particularly good fit for Beampipe, which is interactive and data-heavy.

像许多现代应用程序一样，Beampipe的UI主要是一个单页应用程序(SPA)。 这意味着您的浏览器通常会下载一堆JavaScript，以动态地操纵网页的内容以显示UI并在页面之间进行效果转换。 这特别适合交互式和大量数据的Beampipe。

create-react-app is a fantastically easy way to get started with React. However, for beampipe I opted to use NextJS instead.

create-react-app是使用React入门的一种非常简单的方法。 但是，对于Beampipe，我选择改用NextJS。

NextJS’s main claim to fame is that it shakes up the SPA model a little by enabling server side rendering (SSR). This means NextJS can execute your React code server side, render the UI of your application and send this down to your browser as fully-formed HTML. This reduces the delay before your application is rendered on the client and also helps search engines index your content.

NextJS声名main起是因为它通过启用服务器端渲染(SSR)来稍微改变SPA模型。 这意味着NextJS可以执行您的React代码服务器端，呈现应用程序的UI，并将其作为格式完整HTML发送到您的浏览器。 这样可以减少在客户端上呈现应用程序之前的延迟，还可以帮助搜索引擎索引您的内容。

But actually neither of these are very compelling things for Beampipe. We generally don’t need Google to index an analytics dashboard and the rendering latency is also not a huge concern (particularly as the client will often request new data as the user interacts with the page). On the other hand, I’ve found NextJS really easy to write code in and the SSR capabilities are handy for some of the public pages. For instance NextJS is able to statically render the landing and authentication pages which is quite nice when I get the odd spike of traffic.

但是实际上，对于Beampipe来说，这些都不是非常引人注目的事情。 我们通常不需要Google为分析仪表板建立索引，并且渲染延迟也不是一个大问题(特别是因为客户端通常会在用户与页面互动时请求新数据)。 另一方面，我发现NextJS确实很容易编写代码，并且对于某些公共页面，SSR功能非常方便。 例如，NextJS能够静态呈现登录页面和身份验证页面 ，当我收到奇特的流量高峰时，这非常好。

Using NextJS means I do have to run another container, but since I’m already using Kubernetes, this isn’t a big problem. That said, for someone who hasn’t used NextJS before, I’d probably default to create-react-app and save some of the headache.

使用NextJS意味着我必须运行另一个容器，但是由于我已经在使用Kubernetes，所以这不是一个大问题。 也就是说，对于以前从未使用过NextJS的人，我可能会默认使用create-react-app并省去一些麻烦。

蜜蜂 (APIs)

Back in part one, I mentioned that we’re using GraphQL for the API along with urql on the client. urql is great. Whenever I need a more advanced feature, I reach for it and it’s there without having to dig deep into the internals (as I sometimes found I had to with apollo-client). React hooks make it a joy to use. It’s also well supported in NextJS via next-urql. This will talk to your API server side and thus pass the page to the client fully formed and ready to go.

早在第一部分中 ，我提到，我们使用GraphQL与沿API urql在客户端上。 urql很棒。 每当我需要更高级的功能时，我都可以做到这一点，而不必深入研究内部结构(就像我有时发现我必须使用apollo-client)一样。 React挂钩使使用起来很愉快。 通过next-urql在NextJS中也很好地支持了它。 这将与您的API服务器端进行通信，从而将页面传递给完全形成并准备就绪的客户端。

Beampipe’s primary dashboard view. Also check out the previous article to see the difference a week’s work has made! 😆

Beampipe的主要仪表板视图。 另外，请查看上一篇文章，以了解一周工作的不同之处！ 😆

CSS /设计 (CSS / Design)

As I said, frontend development generally hasn’t been a strong point for me. However, the analytics space is filled with some very beautiful UIs (plausible, fathom among others). To compete at all with them, I’d need to make beampipe at least passable from a design perspective. In practice, this means having fairly tight control over the design and not (as I have done previously) just shoving in a framework.

就像我说的那样，前端开发通常对我来说不是重点。 但是，分析空间充满了一些非常漂亮的UI(在其他方面似乎是合理的，fat昧的)。 为了与他们竞争，从设计的角度来看，我需要使束管至少可以通过。 在实践中，这意味着要对设计进行相当严格的控制，而不是(像我之前所做的那样)仅仅推向框架。

For this reason, I picked TailwindCSS. Tailwind is a fairly new, low-level CSS framework which basically just gives you some utility classes for doing things like adding padding or setting fixed sizes or working with flexbox. This looks and sounds horrifying at first but it actually seems to produce pretty good results. You can use React to abstract components with standardised (but very customised) look and feel. It’s also quite handy when you want to take inspiration from other sites (a growing number are using tailwind) 😃.

因此，我选择了TailwindCSS 。 Tailwind是一个相当新的低级CSS框架，它基本上只为您提供一些实用程序类，用于执行添加填充或设置固定大小或使用flexbox之类的操作。 乍一看，这种外观和声音令人恐惧，但实际上似乎产生了很好的效果。 您可以使用React来抽象具有标准化(但非常自定义)外观的组件。 如果您想从其他站点获得灵感(越来越多的人在使用顺风)😃，它也非常方便。

A fringe benefit of choosing such a low level CSS framework is that it’s really forced me to try to get my head around things like Flexbox and the various quirks of how browsers render and size elements on the page. I won’t pretend to enjoy this but it has been worthwhile and I’d recommend any frontend-curious backend engineer give it a spin.

选择这样一个低级CSS框架的一个附带好处是，它确实迫使我试图解决诸如Flexbox之类的问题，以及浏览器如何渲染和调整页面元素大小的各种怪癖。 我不会假装喜欢它，但是它是值得的，我建议任何对前端有好奇心的后端工程师都可以尝试一下。

Real life Tailwind code from Beampipe’s landing page. Looks gross. Actually not half bad.

Beampipe着陆页上的真实Tailwind代码。 看起来很恶心。 其实还不错。

Programmers often fear things that we do not understand or which appear to behave unpredictably. I’m sure many of us nightmares (or even current experiences) of impossible to track down bugs or things that seemed to just make no sense. I certainly experience this occasionally but it’s something that has become joyfully less frequent as I’ve gained experience. It’s now quite rare for me to feel stressed or intimidated by a bug.

程序员经常担心我们不了解的事情或行为似乎无法预测的事情。 我敢肯定，我们许多人的噩梦(甚至是目前的经验)无法追踪错误或似乎毫无意义的事情。 我当然偶尔会遇到这种情况，但是随着我获得经验，这种情况变得越来越不那么快乐了。 对于我来说，现在几乎很少会因为错误而感到压力或恐吓。

Not so with CSS. Magic incantations that I don’t understand copied and pasted from StackOverflow. It scares me. The solution to this, quite naturally, is to knuckle down and learn it properly (kind of). I now find the fear and self-doubt is starting to recede and UI work, whilst still frustrating, has become more fun. It’s also really liberating to see something you don’t like in the UI and generally just be able to go in and fix it up right away.

CSS并非如此 。 我不理解的魔术咒语是从StackOverflow复制和粘贴的。 吓到我了。 解决这个问题的方法很自然，就是屈指可数并正确地学习它。 我现在发现恐惧和自我怀疑开始减少，UI工作虽然仍然令人沮丧，但变得更加有趣。 在UI中看到您不喜欢的东西也很自由，并且通常可以立即修复它。

That’s all for now. In the meantime do come have click around at beampipe.io or write to us hello@beampipe.io Cheers!

目前为止就这样了。 同时，请点击Beampipe.io或写信给我们hello@beampipe.io 。

翻译自: https://medium.com/beampipe/building-beampipe-part-ii-frontend-9825d69571c4

beam