Geekly articles weekly

最好输掉一天

在投资中，有“现在不好-那么好”的概念。 投资者会定期将其收益的10％，20％甚至30％用于未来。 他将这笔钱投资于债券，股票，OFZ和ETF-谁值得呢。 现在，此刻，投资者正在剥夺自己的收入，剥夺了自己的一些利益，因此，在未来的10-20年内，他将从投资中受益。 未来的利润将弥补今天的困难。 大约和Alexei Okhrimenko （ obenjiro ）宣称的策略相同，但是在发展方面-最好是输掉一天，然后在5分钟内飞起来。


来源

在2018年的Front Conf上， Alexey告诉了自己如何浪费很多时间，后来最终将其保存下来。 这份报告不是关于无聊的感觉，不是关于如何处理单调的例行任务，而是关于如何最大程度地花费时间 -多少钱，花所有的钱，看看结果如何。 该报告的文字内容是为不同项目编写调试，测试，优化，脚手架和验证工具的经验。 作为奖励，Alexey将谈论许多现有工具及其带来的好处。 让我们找出您是否根本需要浪费时间。

关于演讲者：Alexei Okhrimenko是Avito Frontend Architecture的一名开发人员，在这里他稍微改善了数百万人的生活。 领导播客“ 5分钟Angular” ，并在业余时间从睡眠和播客中带队，与来自Tinkoff的家伙一起组织Angular Meetup ，并发表了大量不同且有争议的报道 。


我在哪里可以浪费时间？


零步骤是购买Mac / iMac并立即开始浪费时间，或者将Linux放在笔记本电脑上并浪费所有工作时间，更改配置。 我也强烈建议从Gentoo开始。

我们可以花8点时间。

  • 航站楼
  • 设计。
  • 创建一个项目。
  • 代码生成。
  • 拼写代码。
  • 重构
  • 测试。
  • 侦错

我们从订单开始就出现了亏损。

航站楼


我们可以在终端机上花什么时间失去所有东西？ 整理您的工作区 -创建“我的工作”，“我的爱好项目”文件夹并将所有内容放入其中。 将自己设置为Homebrew以安装将要提到的其他软件。



将iTerm2和Mac上的默认终端放进去。



安装诸如oh-my-zsh之类的附加程序，其中包含许多非常酷的插件。



提供tmux-终端多路复用器。 这是用于终端的程序，它允许您在一个窗口中打开多个窗口，并另外支持会话。 通常，如果关闭终端，一切都会中断，即使关闭了tmux，tmux也将继续起作用。 如果我从未使用过tmux，建议您从DBMS Studio中进行审查 。



规定别名 。 每次您在终端中多次写一些东西时-给自己写别名，它会派上用场。 两次-已经很多了，肯定会有第三，第六和第十。



提供其他工具，例如jmespath或缩写形式-jp 。 可以通过brew安装它，并在JSON文件中进行有趣的查询请求。

brew tap jmespath/jmespath brew instal jp

例如，您已经打包了JSON文件，可以遍历所有内容并找出应用程序和项目中哪个版本的React。



自动化您的工作-不要多次打开相同的文件！

现在让我们谈谈花在哪里。 以上只是时间的一点点损失，您可以在Shell Script中损失更多的时间。

Shell脚本


它是一种编程语言，主要用于bash，具有自己的语法。

 #!/bin/bash for dir in 'ls $YOUR_TOP_LEVEL_FOLDER'; do for subdir in 'Is $YOUR_TOP_LEVEL_FOLDER/$dir' do $(PLAY AS MUCH AS YOU WANT); done done

语言很全-有些人创建游戏和Web服务器，我不建议这样做。 我建议花所有时间花费所有的工作，然后再次将其全部写入文件中。 怎么了 在该行业工作了很长时间的所有熟悉的开发人员都只需创建自己的GitHub存储库以进行配置，然后将其配置放置在其TMUX-终端多路复用器，用于初始化的Shell脚本。



为什么要花大量时间在已经完成的事情上？ 然后，当您切换到另一项工作时，他们将在工作时更换您的计算机，主板将烧坏，您将需要花费一到两三天来设置环境 。 如果拥有这样的存储库，则只需10分钟即可完成设置和安装。

设计方案


通常每个人都会立刻受到启发：“是的，设计！ UML图表！”，但是当我大声说出UML这个词时，许多熟悉的程序员注意到：

-在2018年？！ 你怎么了 UML是过去的可怕遗迹。 你为什么要挖尸体？ 放下铲子！

但是UML非常有用。 例如，在Scrum集会上，Java开发人员在Python程序员讨论后端功能体系结构时倾听。 他悲伤地揉着头，意识到自己什么都不懂，只是浪费了一个小时的时间。 Java开发人员无法与Python程序员互动-他不会说如何编写代码，使用类，mixin或其他任何方法。 他根本不参与此事。 我们公司有JavaScript，Python和Lua。 在2/3的人感到无聊的那一刻：首先是2/3，然后是其他。 UML解决了这个问题。

UML是用于系统设计的通用抽象视觉语言，它使您可以忽略语言的功能。

我将举两个我最喜欢的例子。

顺序图


这些图有助于显示一段时间内的交互历史。



在垂直Y轴上，时间依存性下降：首先，我们收到身份验证请求，然后给出答案，然后将某些内容放入日志中。 在水平轴X上，角色之间已经存在直接交互-某些情况下的参与者。

我个人定期使用序列图来描述应用程序中的过程身份验证。 为此，我是JS开发人员，找到了与Python，Lua和Java后端一起使用的通用语言。 我们彼此了解，并且知道代码将如何工作，因此我们不会理会这种语言或该语言的具体实现。

类图


这些图表也非常有用。 JavaScript有类，图的重点是什么？ 但是有TypeScript，有了它，您可以获取接口，抽象类-最终体系结构的完整表示。



一分钟的设计节省了一周的编码时间。

植物UML


我使用PlantUML Java库。 借助它，您可以使用一些复杂的dsl，例如，其中指示List继承自AbstractList，继承自AbstractCollection的Collection，以及交互，聚合，属性，接口和其他所有内容。

 @startuml abstract class AbstractList abstract AbstractCollection interface List interface Collection List <|— AbstractList Collection <|— AbstractCollection Collection <|— List AbstractCollection <|— AbstractList AbstractList <|— ArrayList class ArrayList { Object[ ] elementData size() } enum TimeUnit { DAYS

结果，我得到了最终的图表。



所有这些都运行良好，有用于Visual Studio Code的插件。
还有另一个有趣的应用程序。

StarUML


我们画出最简单的图：有一个继承测试类的基类。



接下来，我们使用StarUML 。 它不太昂贵，可以导出到Java。 没有工具可以将UML图导出到TypeScript代码，但是我们可以仅使用StarUML导出到Java代码。



斯威特


然后，我们应用JSweet-一个允许您将Java代码转换为TypeScript或JavaScript代码的库。



Java代码...

 import java.until.*; /** * */ public class BaseClass { /** * Default constructor */ public BaseClass(){ } /** * some attribute */ protected String baseAttribute; }

...使用JSweet转换为TypeScript代码：

 /* Generated from Java with JSweet 2.0.0 — <a href="http://www.jsweet.org/">http://www.jsweet.org</a> */ /** * Default constructor * @class */ class BaseClass { public constructor) { this.baseAttribute = null; } /** * some attribute */ baseAttribute : string; } BaseClass["_class«] = «BaseClass»;

这里有一个附加参数_class这是Java的功能，可以删除。 结果，我们从图中获得了现成的TypeScript代码样板-您可以在此基础上工作。 而且，此基础是针对所有人设计和明确的。

花时间设计UML绝对值得。

项目创建


谁每次配置Webpack并在一个新项目中创建webpack-config-伙计们，您怎么了？ 一切还好吗？ 需要帮助吗？ 如果您被劫持为人质，请在评论中写下坐标，我们将派出救援直升机。

避免这种情况且不每次都配置相同内容的最简单方法是在GitHub上本地创建一个公共存储库或提高GitLub CI，克隆该存储库，进入其中并删除git文件夹。

 git clone something cd something rm -rf .git

现在，我们有一个从中克隆的参考项目。 通过这种方法，您可以获得非常便宜的引导程序 。

Yeoman-已弃用。 烂泥-已淘汰


Yeoman被弃用实在太自负了。 它不被弃用，只是像Slush那样越来越少地使用它。 这是两个相同的工具，只是基础不同： Yeoman是Grunt，是代码生成。 Slush是Galp和代码生成 。

尽管这些工具很有趣，但现在更经常使用其他工具。

Angular CLI，Create React App，Vue CLI


谁使用Angular-使用Angular CLI。 创建React应用-与React一起工作的人。 Vue CLI-Vue.JS的粉丝。

大多数已经转移到这些工具。 为什么值得使用CLI的主要论据之一是统一性 。 如果您忘记了使用CLI来抓取项目，则可以确保之后的人会知道项目的结构：团队，功能，可以运行端到端和单元测试。 这些工具非常好。

花时间使用CLI而不是Yeoman来引导项目值得吗？ 是的，不要犹豫。

代码生成


我们有一定的代码库。 通常，当我们开始一个项目时，我们先创建路由，然后创建Redux-如果没有它，我们怎么办？ 每个框架都有专门的代码生成工具。 在Angular中，这是CLI Schematics 。 Vue CLI有一个单独的部分用于生成Vue CLI插件 ：您可以在plugins部分中为我们的项目生成一些代码 。

Redux CLI


我想专注于React和Redux CLI，因为从我的实践来看，React程序员最不参与代码生成，因此查看代码很麻烦。 每次人们创建相同的文件并抱怨使用Redux都很困难时，您需要创建所有内容。 所以已经有了工具！

这是Redux CLI ，它将为您创建一个停靠文件，其中将有效果，缩减器，相应的动作，“愚蠢”组件和“智能”组件。 此外，您可以使用Redux CLI生成组件或代码库。 Redux CLI的安装非常简单，您可以使用它创建一个项目，也可以在一个现成的项目中对其进行初始化，例如，使用Create React App创建的项目。

 npm i redux-cli -g blueprint new <project name> blueprint init blueprint g dumb SimpleButton

还有另一个不依赖于框架的通用工具-Plop 。

扑通




我最近发现了他。 Plop与上一个相同：通过初始化此工具，可以创建所有必需的基本组件。 指出您的应用程序由哪些组件组成，然后生成它们。 因此，您不会浪费时间创建主代码库。 有了用户故事和规范，您可以生成基本功能，测试和基本样式- 节省大量工作 。

您将不得不调整所有工具-我会定期调整到React Blueprint，制作我的组件库，但这一次还清 。

代码编写


会有琐碎的事情。

代码段


代码段使您可以编写一个小片段，一个关键字代码，并获得现成的功能。 例如，您可以通过编写@Component来创建Angular组件。


对于React和Vue，有相同的代码片段。

普通代码段存在问题。 开发人员越专业，他使用的代码片段就越少-仅仅是因为他已经知道所有内容都是如何编写的，并且他懒得创建它们。 他已经记得如何编写此组件。

让我提醒您， 我们的目标是花时间不做任何有用的事情。 因此，我们坐下来编写代码段。 在这里您可以花费无数的时间，并且可以实现目标。

就个人而言，当我使用i-bem.js时，代码片段派上了用场：

 modules.define("button<i>«,</i> [«i-bem-dom»], function(provide, bemDom) { provide( bemDom.declBlock( this.name, { /*   */ }, { /*   */ } ) ); });

这个声明没有什么复杂的，但是语法既不是Angular，也不是React，也不是Vue，而且很难记住它的前100次。 记住第一百零一。 我很痛苦，花了很多时间，然后仅仅由于我使用了代码片段就开始大量创建这些组件。

对于那些使用WebStorm的人来说，这不是很有用，只是因为它没有这么大的插件生态系统，并且基本上所有东西都最初包含在内-这是一个成熟的IDE 。

VScode扩展/ VIM扩展


Visual Studio Code和VIM编辑器的情况有所不同。 要从中获得任何收益，您需要安装插件。 您可以花几天的时间找到所有好的插件并安装它们-插件很多​​！



我花了很多时间寻找它们，我向您建议。 您可以坐几个小时，看看，看看它们，看看美丽的GIF动画-奇迹！ 如果您想让我分享我拥有的所有内容，请在评论中写下。

有一些工具可以自动突出显示代码的复杂性，哪些测试可以通过，哪些则不能，当您可以直接在代码中看到失败的原因，哪些代码可以通过或没有通过，自动编译，自动前缀时，这些工具都可以在插件中找到。

在这里您可以花费很多时间，我们将实现我们的目标。 当然，插件与编写代码没有什么关系，但是可以想象它们可以帮助我们编写代码。

重构


这是我最喜欢的话题！ 如此之多，以至于我有一份关于重构的单独报告： “重构-在哪里？ 去哪里 什么时候 从哪里来？ 怎么了 为什么和如何？” 我将详细介绍它是什么以及如何使用它。

我马上警告您 ， 重构不是您通常想象的 。 通常，这意味着：“我改进了代码库并添加了新功能。” 这不是重构。 如果您现在有认知失调，请查看报告，报告将通过。

AngularJS Grunt-> webpack


关于重构，我想讲一个有益的故事。 我们有一个非常老的AngularJS项目，该项目是使用Grunt进行平庸的串联构建的。 该项目是在Angular的第一版和第二版中编写的。 因此，那里的一切都非常简单：将文件串联起来，然后进行丑化处理，仅此而已。 在某个时候，我们意识到必须迁移到Webpack。 我们有一个庞大的遗留代码库-如何将其转换为Webpack？

我们进行了一些有趣的访问。 首先，他们转向lebab.io库。

勒巴比奥


该库使您可以很好地将代码从ES5转换为ES6。 她采用了旧的代码库并将其转换为新的代码库：插入导入，使用新行，类，正确设置let和const一切都会为您做。 在这方面，一个很好的图书馆。



我们安装了此插件，并通过Lebab.io运行了文件代码。 之后，他们只使用了Mustache模板和代码，它们在新的Angular 1.6和1.5中采用了组件方法，看上去有所不同。 在常规人员的帮助下，我们拉出了必要的部分，在Mustache的帮助下，我们以不同的方式渲染了模板，并遍历了所有文件。

 var object_to_render = {key: «value», ...}; fs.readFile(path_to_mustache_template, function (err, data) { if (err) throw err; var output = Mustache.render(data.toString(), object_to_render); fs.saveFileSync(path_to_mustache_template); }):

结果，我们将大量的旧代码转换为现代格式，并快速连接了Webpack。 就我个人而言，这个故事很有启发性。

f


此工具可让您格式化代码库并在其中进行语义搜索而不是常规搜索。 我们连接我们的库，文件系统，读取文件并想要查找某些内容。 下面是一个抽象示例，我们目前正在使用Angular。

 var jsfmt = require('jsfmt'); var fs = require('fs'); var js = fs.readFileSync('component.js'); jsfmt.search(js,"R.Component(a, { dependencies : z })").map((matches, wildcards) => { console.log(wildcards.z); });

这是我们的要求：

 <b>R.Component</b> (a, { dependencies: z })

R/Component是它自己的R库和一些Component 。

这部分看起来很奇怪：

 R.Component<b> (<u>a</b></u>, { dependencies: <b><u>z</b></u> })

这似乎不是有效的JavaScript，但确实如此。 我们插入小写字母（例如占位符），然后告诉Jsfmt我们对其中的内容不感兴趣：对象或数组，字符串或布尔值，空值或未定义-没关系。 获得指向a和z的链接对我们很重要，之后，当我们遍历整个代码库时，我们将找到z的所有变体。 例如，我们可以找到该组件的所有依赖关系。 因此，您可以执行复杂的重构。

使用该工具，我能够使用树和分析的语义方法重构庞大的代码库。

我不必编写复杂的查询，复杂的常规数据或解析语法树-我只是形成一个查询并指出要更改的内容。

两个附加工具


在重构中，有一件简单的事情要说。 如果要重构某些内容，请在Visual Studio代码中选择代码，然后会出现提示和重构选项。 例如，提取方法，内联方法。


WebStorm有一个上下文菜单，可以根据配置和组合代码库使用组合键来调用。

通常，WebStorm具有更多命令；与Visual Studio Code相比，它现在更加发达。

测试中


现在最有趣和鼓舞人心的:)

硒IDE


首先一个小故事。 测试人员以某种方式找我说：

-我们编写了端到端测试，我们想自动化它们，并且我们有一个Selenium IDE。

Selenium IDE只是Firefox的插件，可以在浏览器中记录您的操作。 它会记住您的所有步骤-单击，滚动，输入，转换，您可能会再次丢失这些步骤。 但这还不是全部。 您可以导出已编写的内容（例如，使用Java或Python），并使用Selenium IDE运行自动化的端到端测试。

听起来不错，但实际上Selenium IDE本身无法完美运行，此外，那时我们仍然有ExtJs 。

Extjs


如果您有ExtJ，请同情和拥抱。 Selenium IDE始终编写最独特的选择器。 在我们的元素上，这是id。 但是每个元素的ExtJ都会生成一个随机id，我不知道为什么。 零版本附带了ExtJs的问题。

 ExtJS = <div id="random_6452"/>

结果，我们的测试人员在早上打开了该应用程序，记录了所有内容，然后在不重新加载页面的情况下定期运行了该页面 ，试图了解例如后端是否损坏。 他们更新了后端，但没有碰到前端。 最主要的是不要单击刷新，因为在此之后会生成一个新的ID。

测试人员立刻想到了一个绝妙的主意。 Selenium IDE可以将其记录导出为HTML格式-我们可以使用HTML，我们有模板引擎-让我们尝试做到这一点！

Google Chrome扩展程序


快速创建了Google Chrome扩展程序，并立即找到了别致的elementFromPoint方法。

 document.elementFromPoint(x, y);

跟踪记录鼠标在窗口上的运动，然后调用elementFromPoint，单击成功后，我找到了单击的元素的坐标。 此外，有必要创建一个特定的选择器，以某种方式专门选择该元素。 无法使用ID-该怎么办？

提出了一个想法-在组件上附加特殊的测试ID 。 为该组件创建了一个抽象测试ID，仅测试需要该ID。

 data-test-id="ComponentTestId«

它仅在测试环境中生成，然后根据data属性对其进行select 。 但这并不总是足够的。 例如，我们有一个组件，但是在i标记中仍然有div ， span ， icon ，icon。 怎么办呢？

为此，我们还生成了XPath ：

 function createXPathFromElement(elm) { var allNodes = document.getElementsByTagName('*'); for (var segs = [ ]; elm && elm.nodeType = 1; elm = elm.parentNode) { if (elm.hasAttribute('class')) { segs.unshift(elm.localName.toLowerCase() + '[a)class = «' + elm.getAttribute('class') + ' »] '); } else { for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) { if (sib.localName = elm.localName) i++; }; segs.unshift(elm.localName.toLowerCase() + '[' + i + ']'); }; }; return segs.length ? '/' + segs.join('/') : null; };

结果，形成了一个唯一的XPath选择器，在成功的情况下，该选择器由选择器的data属性和带有组件名称的data属性组成：

 <b><u>.//*[@data-test-id='ComponentName']</b></u>/ul/li/div/p[2]

如果组件内部仍然存在某种复杂的结构，则根据严格的XPath-没有id，其他所有内容都将脱颖而出。 我们避免使用id，因为我们使用过ExtJ。

此XPath可以轻松测试。 我们都记录了下来，导出回HTML文档，上传回Selenium IDE，然后运行它。



我们创建了Chrome扩展程序，该扩展程序仅生成了Selenium IDE记录格式，但是以其自己的方式生成，而不是Selenium IDE的生成方式。 在那里，我们添加了许多用于微调滚动器，成功加载应用程序的智能检查-我们添加了Selenium IDE并未考虑的其他细微差别。 因此，我们有了全自动的端到端测试。

之后，测试人员唯一要做的就是打开任何版本的应用程序，单击并上传到Selenium IDE，进行检查，将其保存为Python代码，享受加薪和奖金的增加，并对我说“谢谢”。

对于单元测试，我不能取悦React和VueJS社区的人们-对不起！ 我不知道React和VueJS的类似工具-也许它们是。 我只会取悦那些使用Angular的人。

西蒙测试


Visual Studio Code for Angular中有一个SimonTest插件。



unit- — unit-. :

  • , ;
  • .

- - , - . , unit-.

— .

侦错


80% , 80% .

, ? ?

Chrome DevTools


, - , , , .



Debugger ? - - , . Profiler, , Dumps, runtime, , , .

Tracing


— : . runtime : , , — promise, setTimeout, setTimeout promise. .



Spy-js vs TraceGL


: Spy-js TraceGL . , . Debugger : , — ? , , — .

, , — , . , deadlocks — deadlock , .

JS , . . deadlocks .

Spy-js WebStorm, , . spy-js. TraceGL Mozilla. , , Firefox -. TraceGL , , , . TraceGL Chrome , , .

, WebStorm, Spy-js. : Spy-js, , . WebStorm : TypeScript, CoffeeScript, . Spy-js, , , , . .

, , 5 , : , , , . — , , .

?


  • .
  • , - , , -.
  • . .
  • — , , ;
  • , : .
  • , , — , .
  • — .
  • , ! .

? «, »:

— ! : , 5 ! !

— 2018 . Frontend Conf . ++. ? ! Frontend Conf ++ , : , , .

. ..

Source: https://habr.com/ru/post/zh-CN433328/

More articles:


All Articles