榆木搜官网

by Birowsky

由Birowsky

网路已为您准备好，榆木 (Web is ready for you, Elm)

来自必须构建PWA的开发人员的喜悦之泪 (Tears of joy from a developer who got to build a PWA)

Growing up, being movie director was what my werewolf teeth were made for. Who knew that this front-end thing was gonna consume me like this. But it’s all good because creating art that actually helps people might be the one job to rule them all.

长大后，当电影导演是我狼牙般的牙齿。 谁知道这个前端东西会像这样消耗我。 但这一切都很好，因为创造真正可以帮助人们的艺术可能是统治所有人的一项工作。

I’ve been enjoying it since the days when Flash was one of two ways to have rounded corners on screen. I was the happiest when I was able to demonstrate that the web can be a source of delight.

自从Flash是在屏幕上显示圆角的两种方法之一以来，我就一直很喜欢它。 当我能够证明网络可以成为快乐的源泉时，我是最快乐的。

And since then it’s only been getting better.

从那时起，它一直在变得越来越好。

Nowadays however, I’ve observed how companies still prioritize native app development. I need to show how the web, too, is ready for the amazing mobile experiences.

但是，如今，我已经观察到公司仍如何优先考虑本地应用程序开发。 我需要展示一下网络也如何为出色的移动体验做好准备。

In my own circles, I am known as the guy who invests irrational effort in animations and performance. To me, the prettiest thing in the world is nothing without well crafted transitions narrative that helps guide the visual experience.

在我自己的圈子里，我被称为在动画和表演方面投入非理性努力的人。 对我来说，没有精心设计的过渡叙事有助于引导视觉体验，世界上最漂亮的东西就是什么。

Recently I got handed an opportunity that was dear to my heart. It would allow my users feel when using it, the way I felt when creating it.

最近，我获得了一个我心中难得的机会。 它将使我的用户在使用时有感觉，就像在创建时一样。

Meet Dscova.com — the platform that lets us openly share and brag about our experiences worth enjoying.

认识Dscova.com ，该平台可让我们公开分享和吹嘘我们值得享受的体验。

It grows, it shrinks, it dances, it slides, it gets excited when you touch it. And should you choose to add it to your home screen, it’s gonna follow you forever. It’s your overly attached web app that you are not ashamed to introduce to friends.

当您触摸它时，它会增长，收缩，跳舞，滑动和兴奋。 并且如果您选择将其添加到主屏幕，它将永远跟随您。 这是您过度附加的网络应用程序，您不为介绍给朋友而感到羞耻。

One thing that is clear is that it doesn’t blindly follow any design guideline. It has it’s own unique tone. We have mi hombre Diego to thank for that. I love working with designers who bring their own perspective.

显而易见的一件事是，它不会盲目遵循任何设计准则。 它有自己独特的音调。 我们要向迭戈致敬。 我喜欢与拥有自己观点的设计师合作。

Dscova should be the definition of everything I was convinced was possible on the mobile web. It’s my favorite baby thus far. Wish I could call it George.

Dscova应该是我确信可以在移动网络上进行的所有操作的定义。 到目前为止，这是我最喜欢的孩子。 希望我能称它为乔治 。

Do you notice? I too am not following the almost strict guidelines of delivering app shell. Instead, I’m embedding a splash with the initial response from the server. This is how I’m able to let the users know that they’re in the right spot, in a quick, yet smooth way.

你注意到了吗？ 我也没有遵循交付应用程序外壳的几乎严格的准则。 相反，我在服务器的初始响应中嵌入了一个初始标记。 通过这种方式，我能够以快速而流畅的方式让用户知道他们处在正确的位置。

OF COURSE I understand that many of the big guys take the app shell approach.

当然，我知道许多大公司都采用应用程序外壳方法。

I am convinced that the slowly fading splash prepares the user in a better way for the well known app behavior that always comes after a splash.

我坚信，缓慢消失的启动会以更好的方式使用户为启动后总是发生的众所周知的应用程序行为做好准备。

Demoing Dscova around, I’ve had casual users forgetting they were on the web. Not surprising, since they care for the experience, not the platform.

在演示Dscova时，我让休闲用户忘记了他们在网络上。 毫不奇怪，因为他们关心的是经验，而不是平台。

So I’d like you to drop everything and come join the wave. Especially if you turn out to be one of the artists that have ever delighted me on my phone.

因此，我希望您放弃一切并加入潮流。 尤其是当您成为使我在手机上感到高兴的艺术家之一时。

I’m aware that you might be reluctant to make this transition today. As big and undisputed you think the current app stores are, imagine how sooner or later, the web itself is gonna turn into an app store, without the store part. No landing pages. Just apps that integrate with the OS and with each-other.

我知道您今天可能不愿意进行此过渡。 就像您认为当前的应用商店如此庞大而无可争议，想象一下迟早网络本身会变成没有商店部分的应用商店。 没有目标网页。 只是与操作系统以及彼此集成的应用程序。

If you consider today’s users as lazy and aware of their time, hold your breath for the unexpected complaint:

如果您认为当今的用户懒惰并意识到自己的时间，请屏息等待意外的抱怨：

“I had already opened their app, but then they wanted me to go to some app store and install something else. They said it’s their app. I’m confused.”

“我已经打开了他们的应用程序，但是后来他们要我去一些应用程序商店并安装其他东西。 他们说这是他们的应用。 我很困惑。”

Today’s users generally know web when they see it. I have the greatest laughs with them. To understand what I mean, and appreciate the PWA (Progressive Web App) installation process, show it to a non-techy user, and wait for the cutest “um.. [conspicuously looks at you] was that it??” reaction.

今天的用户通常会在看到网络时就知道它。 我和他们在一起笑得最开心。 要理解我的意思，并欣赏PWA(渐进式Web应用程序)的安装过程，向非技术用户展示它，然后等待最可爱的“嗯。[明显地看着您]是它吗？？” React。

We have Google to thank for the efforts they made for us and our users in this regard. Still, the one thing that’s always going to matter more is what’s inside.

感谢Google为他们和我们的用户在这方面所做的努力。 尽管如此，始终至关重要的一件事是内部的东西。

Delightful is possible. 60 fps is possible. All the Olympic gymnastics that these views do, as well as being fun, aim to help the user understand what is happening. Where everything went, and where everything came from. But as lovely as they are, they weigh on our heads with their need for complex state management. Look at this beauty:

令人愉快是可能的。 可以达到60 fps。 这些观点所做的所有奥林匹克体操活动，不仅有趣，还旨在帮助用户了解正在发生的事情。 一切都在哪里，一切都在哪里。 但是，尽管它们非常可爱，但是它们对复杂的状态管理的需求却使我们感到头疼。 看这个美女：

This is my favorite piece of interaction. It couldn’t be any more seamless for the user. Yet behind the scenes, seemingly unrelated contexts are doing some elegant communication to accomplish this goal. While untrue for OO (Object Oriented) systems, here any view element has access to any piece of app state without ANY consequence. I’ll wait here till it sinks in.

这是我最喜欢的互动方式。 对于用户而言，这再无缝不过了。 然而，在幕后，似乎无关的上下文正在进行一些优雅的交流以实现此目标。 虽然对于OO(面向对象)系统而言不正确，但此处的任何视图元素都可以访问任何应用程序状态，而不会产生任何后果。 我将在这里等到它沉没。

We don’t need to call for an external state, and we don’t need to wait for it. It’s because of the nature of the system. It’s because of how the whole app state is a single bag of data that is available everywhere. And because the state is immutable, only contexts with explicit requirements to update their contextual sub-bags of data are able to do so. What a sentence.

我们不需要调用外部状态，也不需要等待它。 这是因为系统的性质。 这是因为整个应用程序状态是一个无处不在的数据包。 而且因为状态是不可变的，所以只有具有明确要求的上下文才能更新其上下文子数据包。 真是一句话。

In this example, the developer designs the map state and implements the pan based on location state updating. The jolly fun happens when in the context of experience creating wizard, all the next developer needs to do is:

在此示例中，开发人员设计地图状态并基于位置状态更新来实现平移。 当在体验创建向导的上下文中，下一个开发人员需要做的所有事情是：

I mean, I could’ve used words to explain this, but look at it. That’s English.

我的意思是，我本可以用文字来解释这一点，但请仔细阅读。 那是英文。

Notice how currMapCenter is there for the taking. It requires no special strategy of how to React™ when there are new map center coordinates. They are just.. there.

请注意currMapCenter位置。 当有新的地图中心坐标时，它不需要如何使用React™的特殊策略。 他们只是..在那里。

Not only does it make solving this use-case a joke, but the data guarantees that come prepackaged with the immutability allow us to not worry about manipulating the map state outside of it’s context. And what do we call development without worries?

它不仅使解决此用例成为一个笑话，而且与不可变性一起预包装的数据保证使我们不必担心在其上下文之外操纵地图状态。 我们怎么称呼发展而无后顾之忧？

Thats joy, my invisible-bug-squashing friends.

没错，我的隐形虫挤压朋友。

Joy!

喜悦！

I haven’t mentioned that we use Elm yet, have I? Sorry bout that. Well, I run this small team that somehow, after Elm, became a lot bigger, even tho the number of people remained. We can’t pass the free plan on Sentry. We don’t have any testing work left for our family members either. And we ship features like алва[1]. So pardon me when I assume that EVERYONE is on the Elm train or getting there.

我还没有提到我们使用榆木 ，对吗？ 抱歉， 好吧，我管理着这个小团队，在榆树之后，它以某种方式变得更大，甚至剩下的人数也增加了。 我们无法通过有关哨兵的免费计划。 我们的家人也没有任何测试工作。 我们还提供了алва[1]之类的功能。 所以当我认为所有人都在榆树火车上或到达那里时，请原谅我。

Look, I don’t know how much this matters to you, as no number measures user’s delight, but let’s see anyway:

看，我不知道这对您有多重要，因为没有数字可以衡量用户的喜好，但是无论如何，让我们看看：

Consider how this app, with it’s 37K lines of Elm, and it’s 280KB gzipped size, 40% of which are libraries, generally has a first load in 4 seconds. I have no idea when the hell would I ever need to even think about splitting and loading modules lazily. Something that is imperative with the other platforms.

考虑一下这个应用程序，它有37K行Elm，压缩大小为280KB，其中40％是库，通常在4秒钟内就会有第一次加载。 我不知道我什么时候甚至需要懒惰地拆分和加载模块。 其他平台必须具备的功能。

Dark story time: last year we were working on an Angular 2 project. Started with the early betas. When we completed it, NG was stable, but it took the app 20 seconds to start. It was because it needed to compile the views on the device on every start. First, it took us time to realize that. Then, we had to wait for the ahead of time compiler to get released before we released the app. As I said, a dark story. Go play it with friends. Start with: “A product launch got delayed”. [2]

黑暗故事时间：去年，我们正在进行Angular 2项目。 从早期的Beta开始。 当我们完成它时，NG稳定了，但是启动该应用需要20秒钟。 这是因为它需要在每次启动时在设备上编译视图。 首先，我们花了一些时间来意识到这一点。 然后，我们必须等待提前发布编译器才能发布应用程序。 正如我所说的，一个黑暗的故事 。 和朋友一起去玩吧。 首先：“产品发布被推迟”。 [2]

I believe you can feel my relief when in the first run of this test we got 100, 98, 98. We then enabled long-term caching and.. well you see the hundreds.

我相信你能感觉到我的救济时，在这个测试中的第一次运行，我们得到100，98，98。 然后，我们启用了长期缓存，..您会看到数百个。

I am keeping distance from implementation details throughout this article because in the end, this is what matters. This feeling that I have.. it’s.. let me try it this way: have you been noticing how popular it is for a front-end guy to feel stressed out? How much effort needs to be invested to be on top of the game? Has there ever been a bigger tools and techniques explosion compared to what’s happening now on the front-end? As self-abusive as it sounds, If I didn’t actually love this craze, I wouldn’t have discovered functional reactive programming. I wouldn’t have discovered Elm. [3]

我在本文中始终与实现细节保持距离，因为最后这才是重要的。 我有这种感觉..就是..让我这样尝试：您是否注意到前端人员感到压力很大吗？ 要投入到游戏之上，需要投入多少精力？ 与前端所发生的事情相比，有没有更大的工具和技术爆炸？ 听起来很自欺欺人，如果我实际上不喜欢这种热潮，那么我就不会发现函数式React式编程。 我不会发现榆树的。 [3]

I finally live in a world where technicalities are irrelevant. For any challenge there is an obvious approach to solving it. I’m just focused on what I love the most: fading and blurring and moving things around.

我终于生活在一个技术无关紧要的世界中。 对于任何挑战，都有一种明显的解决方法。 我只是专注于我最喜欢的东西：淡入淡出，模糊不清以及四处移动。

Not only do I not suffer the impostor syndrome anymore, but I feel something that rests comfortably on the opposite side on that spectrum. Ever since the days I started following Elm, every time I see a massive new feature roll-out in any of the popular frameworks or tools, I usually think: “Oh look, another idea taken from Elm.”, either Redux or immutability or stateless view components. Or even better, I realize that it’s a solution to a problem that is nonexistent in Elm Town.

我不仅不再遭受冒名顶替综合症 ，而且在该频谱的另一端我感到舒服。 自从我开始关注Elm的那一天起，每当我在任何流行的框架或工具中看到大规模的新功能推出时，我通常都会想到：“哦，这是Elm提出的另一个想法。”，Redux或不变性或无状态视图组件。 甚至更好的是，我意识到这是对榆树镇不存在的问题的解决方案。

I want you to realize the advantage Elm gives you. They can go nutz in trying to improve JS. But they’ll never be able to fix it unless they change it. And you know that I know that you know that they cannot do that. So instead of endlessly learning how to build stuff, you’ll start building stuff, endlessly. Pulitzer please!

我希望您认识到榆木带给您的好处。 他们可以努力改善JS。 但是除非更改，否则他们将永远无法修复它。 而且您知道我知道您知道他们无法做到这一点。 因此，您将无休止地开始构建东西，而不是无休止地学习如何构建东西。 请普利策 ！

Elm is totally new and different. It couldn’t be this good any other way. The hardest thing you’ll have to do is unlearn all the OO patterns you use to handle problems that are (together!) nonexistent in Elm. Seriously.

榆树是全新的，与众不同的。 其他任何方式都不可能是一件好事。 您要做的最难的事情是取消学习用于处理Elm中根本不存在的问题的所有OO模式。 说真的

Have you started using underscore to transform data? Have you been moving away from classes and use modules as encapsulation contexts? These are great first steps that would ease you in into the productivity boost in Elm’s pure functional world.

您是否已开始使用下划线转换数据？ 您是否正在远离类并使用模块作为封装上下文？ 这些伟大的第一步可以使您轻松进入Elm纯功能世界的工作效率。

But, if you are already using React or Angular in a functional reactive way, you’ll find that Elm is where everybody got their ideas from and how they look like in their purest form. You alone will be able to replace 20 of the you before you became Elm.

但是，如果您已经以一种功能性的React方式使用React或Angular，那么您会发现Elm是每个人从中获得想法以及以最纯粹的形式看起来的地方。 成为榆树之前，您一个人就能取代其中的20个。

Here’s the hard question: Who’s gonna help you once you get stuck? I know this is what you are afraid of. It’s a small community, so the support is questionable. How do I put this.. you will nowhere find more dedicated and more capable group of people in one room. I don’t know how they breathe in there! Everyone trying to beat everyone else for who gets to help the newcomer first!

这是一个棘手的问题：一旦您遇到困难，谁能为您提供帮助？ 我知道这就是你所担心的。 这是一个很小的社区，因此支持令人怀疑。 我该怎么办..您将找不到一个房间里有更多专注和能力更强的人。 我不知道他们在那里呼吸！ 每个人都试图击败其他人，因为谁先帮助了新人！

He fights about everything with everybody.But when you ask something on Slack, chances are, he’ll be there to help you.

他与所有人为之奋斗，但是当您在Slack上提出问题时，机会来了，他会在那里帮助您。

And then get this, there is a weekly thing called “No dumb questions” on Reddit. What? They didn’t use that name?? Oh well..

然后得到这个，在Reddit上有一个每周的活动，叫做“没有愚蠢的问题” 。 什么？ 他们没有使用这个名字吗？ 那好吧..

So what was I saying.. oh yes, delight users with PWA, enjoy doing so with Elm. And if you absolutely need to be present on the app stores, for extra 5% effort, Cordova will take you there. We spent the extra time because one of the core features of Dscova is notifying users as they move around when something awesome is nearby. And since background geolocation is still not conceptualized for the Web, we did it in the hybrid versions. That, and the fact that Apple doesn’t love Safari the way Google loves Chrome.

所以我说的是..哦，是的，使用PWA可以使用户满意，并喜欢Elm。 而且，如果您绝对需要在App Store上露面，那么只需额外5％的努力， Cordova就会带您前往。 我们花了额外的时间，因为Dscova的核心功能之一是在附近有很棒的事物移动时通知用户。 并且由于背景地理位置仍然没有为Web概念化，因此我们在混合版本中做到了。 那就是事实，Apple不像Google喜欢Chrome那样喜欢Safari。

Let’s start wrapping up. This is too much not writing Elm for me.

让我们开始总结。 不为我写Elm太过分了。

Resources: When we were following beginner material, these were the greatest ones:

资源：当我们关注初学者的资料时，这些是最棒的：

• Book: Elm in Action by Richard Feldman (a great great guy. just. great.)

  书： 理查德·费尔德曼 ( Richard Feldman)的 《 榆树在行动》 (一个伟大的伟人。

• Video course: Elm for Beginners by James Moore

  视频课程： James Moore的《 榆树初学者》

• Video course: Building Web Apps with Elm by The Pragmatic Studio

  视频课程： The Pragmatic Studio 使用Elm构建Web应用程序

• Go make some noise on Slack

  去放松一下吧

• Listen to our spiritual leader on Elm Town

  在榆树镇上聆听我们的精神领袖

• I wanna put a special note here for the folks who like me, when I was starting, want to begin on a production app right away. Go learn Webpack. We were used to Gulp chains, but now our build process is nice and tight thanks to the great tools that exist for Webpack.

  我想在这里给像我这样的人特别注释，当我刚开始时，他们想立即开始生产应用程序。 去学习Webpack。 我们习惯了Gulp链，但是现在有了Webpack 强大的 工具 ，我们的构建过程变得非常紧密。

Hold the applause fellas, special props are coming:

掌声鼓掌，特别道具来了：

The kind of guy that holds your hand and helps you cross the road.

那种牵着你的手，帮助你过马路的家伙。

The only guy who could ever outwork me.

唯一可以胜任我的人。

And because of it, he now has to fight every other smart person who knows which direction Elm should take.

因此，他现在必须与其他所有知道 Elm应该走哪个方向的聪明人战斗。

[1] Something that my country used to ship a lot.[2] Angular is solid today. The AOT compiler can easily be plugged in your Webpack config, or even simpler, you might just wanna use their CLI.[3] Elm is actually not a reactive platform anymore. It became something way more intuitive than that.

[1] S omething ，我国用于装运了很多。[2] Angular今天很坚固。 AOT编译器可以轻松地插入Webpack配置中，甚至更简单，您可能只想使用其CLI 。[3] Elm实际上不再是React式平台。 它变得比这更直观。

翻译自: https://www.freecodecamp.org/news/web-is-ready-for-you-on-line-elm-d3aa14dbf95/

榆木搜官网