VueJS生态系统的（超级）快速指南-从高级Java开发人员的角度来看

JavaScript ecosystem in a nutshell

At the end of 2016 or beginning of 2017 I came across this blog post. It was at a point when I was beginning to think of building OSBO, and I knew that this would involve finally leaving my Java/backend-only fortress that I happily occupied throughout my whole carrier, and moving at least somewhat into the “enemy grounds”. This blog post was funny, but also in some ways petrifying. It confirmed all my worries about what it will look like - to have to do any front-end work. It sounded simply crazy.

现在，在2.5年后，在后来的许多Vue代码行中，我希望使前端世界对像我这样的人（那时）变得不那么吓人。 有能力的Java高级开发人员，由于这个原因或其他（选择或情况），他们在（很多）前端工作中没有太多的经验，并且不确定要从哪里开始。

Java ecosystem in a nutshell

当您停下来思考片刻时，Java世界不仅涉及到Java，而且涉及到HelloWorld之外的其他事情。 我曾经指导过一些初级开发人员，最近我为他们必须面对的陡峭学习曲线感到有些遗憾。 如果您最近加入现代项目，那么从第一天开始，您可能会遇到以下几种名称（不分先后顺序）： Maven / Gradle; Spring，Spring JDBC，Spring MVC，Spring Boot，Spring Cloud，Spring……； 冬眠 龙目岛，番石榴，Apache Commons； 杰克逊（杰克逊） 火花; 骆驼; JMS； Tomcat，码头，Netty； 尤里卡，Hystrix，色带； JUnit，Mockito，AssertJ，黄瓜; Slf4j，Logback，Log4j; 码头工人 更何况：传统的DB + SQL； MongoDB; Elasticsearch; 卡桑德拉; Neo4j; Couchbase； 卡夫卡; Ehcache，… 并且：AWS，Google云平台，Azure-分别具有数百种产品。 And that’s just stuff from the top of my head, a tip of the iceberg. There is just so much more.

我们大多数人并没有真正考虑它，因为我们已经熟悉了该堆栈。 我们在需要时添加工具和框架，然后学习另一件事，然后继续前进。 当您从一个新手的角度在一处查看所有这些内容时，您就会意识到所涉及的运动部件的数量。

绕过这个小弯路，我告白了：老实说，我不知道为什么我认为JavaScript世界会有所不同:)

Making sense of both

幸运的是，从概念上讲，很多事情都可以很容易地映射到我们已经熟悉的事物上，其余的事情在逻辑上是有意义的。 目前，我们的堆栈由Vue / Nuxt / Vuetify组成，因此，我将从这个角度出发。 因此，事不宜迟：

• Vue - the mapping into Java world is not always going to be obvious, and I think Vue vs React vs Angular is one of these things that is not strictly translatable. Maybe the closest would be Java vs Kotlin vs Clojure vs Scala vs… - you still have the underlying core (JVM + bytecode) just as with web frameworks you have browsers, HTTP, HTML, CSS, JavaScript/Typescript at the core of what eventually runs.Why would you need Vue instead of just HTML/CSS/plain Javascript/other simpler Javascript libraries? To me it’s a similar question as when people ask “why do I need Spring portfolio”. You don’t technically need it - but if you don’t use it (or use only a plain dependency injection framework like Guice), on any more complex project you’ll likely end up writing your own version of various Spring libraries, with plenty of bugs and loads of wasted time.What I really love about Vue, and I don’t know, perhaps it’s similar in React, is the reactivity. That is, you sort of tell Vue that this bit of UI depends on this particular variable (you 捆绑它添加到此数据），然后您只需修改数据，UI组件就会自动更新-无需时髦的侦听器，回调或任何其他样板。 它使创建可爱的交互式UI非常简单。节点JS-想一想：Tomcat / Jetty之类。 就像您在每个Java应用程序中都不需要它们一样，一旦您执行任何更复杂/动态的项目，就很可能会使用它。Nuxt - this is like a swiss-army knife of the Vue world. It’s what Spring Boot is for Java. Opinionated framework, and you better stick to the conventions - but when you do it can save so, SOOOO much time. It integrates a number of other goodies, from VueX, Vue Router, to webpack, and loads of other things, and Just Works. I love it. All the following comes for free (otherwise it will be up to you to make these things play nicely together) 威化 - a material-design components library. Vue itself is mostly about “language” to describe your app. Think loops, and conditionals, and structure. 威化 is what brings you out-of-the-box nicely styled buttons, tables, iterators, tabs and many many other building blocks so that your page can look pretty. You could use Vue with pure HTML/CSS, or many other components libraries, or some simple CSS layers above - it’s all up to personal taste. We found 威化 extremely beginner friendly so if you’re not a CSS Ninja, you can’t go wrong starting here.VueX-状态管理库，有点像是Vue应用程序的内存全局可用缓存。 对于几乎没有任何数据的静态页面而言，几乎所有复杂的应用都可能需要它。VueRouter-有点像Spring MVC / Controllers路由-基本上，指示代码的哪一部分负责应用的哪一部分SSR vs客户端模式vs静态呈现的内容-要深入了解具体细节，这确实值得一提，但是现在有一件事情需要理解。 Nuxt提供了三种运行Vue的选项：静态渲染的网站，这意味着您使用Nuxt + Vue编写代码，然后创建一个漂亮的静态页面，即没有Node.js，您只提供纯HTML / CSS / Javascript，甚至来自S3之类的东西。 想一想，硬盘上的静态HTML。完整的SPA（单页应用程序）模式，也就是说，您的应用程序作为一个空壳提供给浏览器，并且浏览器执行Javascript来动态创建HTML / DOM通用模式-您网页的第一个匹配项将在Node.js服务器上执行（因此名称：SSR，服务器端呈现），然后在该客户端会话中执行后续的页面/路由（准确地说：直到有人关闭/重新打开标签） ，或点击刷新）将由浏览器处理

生成静态网站的好处非常明显-易于维护。 但是，您将无法将其用于高度动态/数据驱动的应用程序。 如果您不能使用它，那么通用/ SSR模式与SPA相比有什么好处？ 简而言之：SEO。 如今，搜索机器人使用Java脚本要比以前好得多。 如果您的页面上只包含一些JS，则可能仍会获得页面索引。 不幸的是，根据我们的经验，如果使用更复杂的方法，当您通过大量的数据调用驱动页面时，漫游器不会等待足够长的时间/无法充分处理所有内容以正确编制索引。 Nuxt使SSR的使用变得异常简单，当我们意识到我们需要SSR时，这就是我们开始使用Nuxt的关键所在，因为没有它，我们陷入了痛苦的世界。

• Axios-Axios =〜Spring RestTemplate。 进行HTTP调用的简洁库。 很好地集成到Nuxt中，因此您只需很少的配置就可以在需要的任何地方访问它。PWA（渐进式Web应用程序）-根据Google的说法，渐进式Web应用程序（PWA）是使用现代Web功能向用户提供类似应用程序体验的Web应用程序。Nuxt带有一个使创建PWA更容易的模块。 （我们只是在这里开始旅行，但稍后可能会写更多有关此内容的信息）npm / yarn + webpack-即使这些是独立技术，我也将其归结为一点-因为对我而言，所有这些都适合“我如何管理依赖关系和构建事物”。 也就是说，相当于Maven / Gradle。 这里的中心是package.json（认为：build.gradle / pom.xml）。 在使用Nuxt时，不需要考虑webpack的部分，因此我们不需要-但是您可以在需要时进行大量配置。巴别塔 - kind of related to above. would you be happy to be stuck on Java 1.4 or 5.0 and not to be able to use all the stuff that came in Java 6, 7, 8… ? (rhetorical question) Not surprisingly, JavaScript folks are not to keen on being stuck on some old JavaScript syntax either. But unlike in Java world, you have very little control over what environment (browser) your code will run in. So in some ways, 巴别塔 is kind of like a clever Java compiler, which converts your brand-new-code into something that an old JVM… I mean old browser… can still understand. Neat. Oh, and the best thing? If you use Nuxt, all the magic happens without you even thinking about it.BTW, have you noticed I keep using “JavaScript” here - in fairness, I should probably say JS, EcmaScript, TypeScript… - but that would just confuse things at this stage, so let’s stick to JS as a mental shortcut, knowing it’s not strictly just that.Eslint +美化剂-类似于Java世界中的Findbugs，PMD和代码样式检查器。 实际上，我们没有打开它们，因为它们在默认配置中非常嘈杂，而且我没有时间进行微调-但这是我（永无止境）TODO列表中的内容。玩笑和柏树-测试测试测试。 Jest和JUnit，Cypress一样，我们发现它们对于高级/功能测试很有用。 那里有很多选择，这些似乎与我们最一致。

坦率地说，就是这样！ 这就是您开始使用Vue / Vuetify / Nuxt之旅所需要了解的一切。 是的，当然还有更多的方法，尤其是当您开始深入了解幕后或有不寻常的要求时，但是，只要模糊地熟悉以上内容，就完全有可能提高工作效率。 不仅是超级简单的Hello World，您还可以构建一个应用程序！

BONUS 1: Why VueJS and not React or Angular?

我的开发人员朋友经常向我提出这个问题，所以最好一次在这里解决。 Angular很容易-我绝对讨厌Google放弃项目的趋势，而且我坚信他们会再做一次，因此我什至没有对此进行进一步的研究。 坦率地说，我对React本身并没有什么反对，也许除了它是由一个邪恶的邪恶公司制造的，我更愿意保持一定距离。 但是，否则，我相信这是一项出色的技术。 那为什么不呢？

我们的项目是由两个人（一个人和一个全新的开发人员）构建的，一个人在项目开始时可能声称自己拥有与在Dreamweaver中创建HTML网站一样多的经验。 我首先查看了React，但是整个“仅Javascript”的态度让我有些害怕。 即使对于我来说，获得一个仅比“ Hello World”仅几步之遥的简单应用程序也不是5分钟的工作，我也不知道发生了什么。 Vue具有将HTML（结构）+ CSS（样式）+ Javascript（动作）组合成组件的巧妙概念，这对于新手来说似乎更容易理解，这对我来说非常有意义。 关于HTML和CSS的真正基础材料也有很多选择。 您可以逐步学习。 反应吗 刚开始时感觉太陡了。

一个有趣的事实：刚开始时，因为我是如此“铁杆Java”，所以我们甚至没有使用Nuxt。 我们没有使用Node.js。 我们首先将所有内容集成到单个应用程序中，一个带有FreeMarker的Spring Boot以及普通Vue。 Webjars提供Java脚本库的时间。 然后手动添加Vue Router和VueX。 那是一段有趣的时光，我已经通过这种方式学到了很多关于堆栈的知识，但是这不一定是我建议您重视时间的一种方式；）我认为React文档现在可能会更好一些，但是那时候， 这确实使您不愿全力以赴，而我只是没有为此做好准备。

所以我们到了。 我在任何时候都不后悔这一决定。 是的，从“更多工作”的角度来看，拥有React技能可能会更实用-但是，否则，我们对Vue的工作方式感到非常满意。

BONUS 2: What are the gotchas?

Environment

到目前为止，有一个主要的“陷阱”确实使我对Nuxt / Vue组合感到困惑，并且作为后端开发人员，您可能会继续前进。 “多次构建一次部署”的概念。 目前，这确实是一件棘手的事情，它涉及许多技巧，而不是一种简洁的标准解决方案。 在您通常的Java应用程序中（不要像Spring Cloud Config Server那样疯狂），您通常会以属性/ yml文件和/或传入环境变量的形式进行外部化配置。 后者可能会给您带来无限的悲伤，因为Nuxt某些部分中的环境变量在构建时放入。 让我重复一遍。 Nuxt / Webpack构建采用您的环境变量在构建期间并将它们烘焙到生成的资源中。 它们不是在运行时从环境中获取的。

What makes it more confusing is that this is not 100% the case for all of your app / use cases. There is a plugin for Nuxt that allows you to read and use runtime environment variables. A good rule of thumb is: if you’re using something in your own code, in your components - you’ll be fine using runtime $env variables. However, and this is where things are getting nasty, if you’re using a 3-rd party Nuxt plugin or module (e.g. for google analytics) and it’s configured in nuxt.config.js - you’re stuffed. There is currently no elegant way for you to use environment variables for this purpose. It’s extra confusing as nuxt.config.js is run twice - during build, and then on your (built) server startup. So if you have something like:

console.log("Full environment we're running in: " + JSON.stringify(process.env));

在nuxt.config.js的开头，则可能会像正确设置env变量一样SEEM。 除非在运行此代码时，配置中的变量已经硬编码为生成期间存在的值。 这更令人困惑（！），因为如果您以开发人员模式运行（通常在localhost上进行测试时会使用的模式），那么一切都会起作用，因为构建和运行实际上是相同的过程-因此为此过程设置环境变量就可以了 精细。

uck 这使得在Docker / cloud中运行事情变得不平凡，并有效地迫使您在部署（或使用许多可能的hacks之一，我可能在以后的文章中介绍）中重建（至少是一部分）应用程序。 我真的希望Nuxt团队能在某个时候找到一个更整洁的解决方案，因为目前感觉真的很糟糕。

Reactivity

当您开始使用Vue时，可能需要花费一些时间来了解Vue的精确度魔法反应性工程。 我们曾经有过尝试使用动态值的情况，但它并没有像我们期望的那样更新视图。 它不再发生在我们身上，所以我认为现在我们可以直观地掌握反应性的工作原理，但是在过去，这种反应并不总是很明显。 如果人们想出任何反应不成功的例子，我想我可以尝试找出原因，并将其分解为更直观的规则/查看方式。

CODE

从技术上讲，这里没有太多代码可显示。 Nuxt为框架项目提供了一个强大的生成器，所有您需要做的（在安装yarn和node.js之后）可以运行：

yarn create nuxt-app plain-nuxt-app

It will ask you a couple of questions about what you want included in your project. An example with choices equivalent to what we have in our project can be found in examples/plain-nuxt-appThe linting configuration that comes enabled by default is super strict so you might want to skip it if you are only just starting - otherwise you can get some scary looking confusing errors and warnings.

各位，今天就这些。 如果以上任何要点或主题特别有趣，请在下面评论/请求更多信息！

from: https://dev.to//lilianaziolek/a-super-quick-guide-to-vuejs-ecosystem-from-senior-java-dev-point-of-view-1kmo