本文共 12936 字，大约阅读时间需要 43 分钟。
短线技术指标最佳组合
by Ondřej Polesný
通过OndřejPolesný
You know how your website is going to look and have a good idea about the content structure. But no one wants to maintain a set of static pages, right? Let’s take a look at how to make your website dynamic and easily adjustable, so that with every change, you do not need to touch the code and the website’s implementation.
您知道您网站的外观，并对内容结构有一个很好的了解。 但是没有人想要维护一组静态页面，对吗？ 让我们看一下如何使您的网站动态且易于调整，这样，每次更改时，您都无需触摸代码和网站的实现。
But where do we start?
但是我们从哪里开始呢？
Do we need to install any tools? Is it a good idea to use JavaScript or stick with server-side rendering using MVC or an all-in-one CMS? I will explain how to bring life into your websites and prepare them for the future.
我们需要安装任何工具吗？ 使用JavaScript还是坚持使用MVC或多合一CMS进行服务器端渲染是个好主意吗？ 我将说明如何使您的网站充满活力，并为未来做好准备。
So you want to build a modern website. A website that is fast, secure, looks good and provides the best user experience. The word modern is key here, as it also relates to our hectic time. Everyone is busy, our bosses want us to handle 120% of our assigned work, and there is hardly a half-hour to enjoy lunch every day. Therefore, creating the whole website functionality from scratch does not fit our scenario. The objective is to get it up and running as fast as possible and share it with the whole world, preferably today.
因此，您想建立一个现代化的网站。 一个快速，安全，外观良好并提供最佳用户体验的网站。 现代一词在这里很关键，因为它也与我们忙碌的时代有关。 每个人都很忙，我们的老板希望我们处理我们分配的工作的120％，每天几乎没有半小时享受午餐。 因此，从头开始创建整个网站功能不适合我们的方案。 目标是尽快启动并运行，并与全世界(最好是今天)共享。
Using an all-in-one solution such as a content management system (CMS) will ensure your website is up and running quickly. At least its first version. Installing it and accessing the administration interface for the first time could take you just a few minutes if you already have the development environment ready (otherwise add a few hours for the installation).
使用内容管理系统(CMS)之类的多功能解决方案将确保您的网站正常运行。 至少是第一个版本。 如果您已经准备好开发环境，则第一次安装它并首次访问管理界面可能会花费您几分钟的时间(否则会花几个小时进行安装)。
Once you log in, you can configure the website, define the URL policy and then start creating templates and layouts based on the design you picked. Getting the templates and content into the CMS can be time consuming. Namely you need to:
登录后，您可以配置网站，定义URL策略，然后根据您选择的设计开始创建模板和布局。 将模板和内容放入CMS可能很耗时。 即您需要：
All this can be done very quickly if you are familiar with the CMS. But your first few websites will probably not be candidates for the Site of the Year. ?
如果您熟悉CMS，所有这些操作都可以很快完成。 但是您的前几个网站可能不会成为“年度最佳网站”的候选人。 ？
When I used CMS systems in the past, sooner or later I always ended up creating custom controls (that is, custom code), as the HTML output of standard controls was not sufficient or directly went against new industry standards, like . I consider this the biggest caveat of CMS systems, they limit you in various ways as they position themselves as a master engine of your website. I always found myself solving small tasks 80% of the time.
过去使用CMS系统时，迟早总会创建自定义控件(即自定义代码)，因为标准控件HTML输出不足或直接违背了诸如类的新行业标准。 我认为这是CMS系统的最大警告，它们以各种方式限制您，因为它们将自己定位为网站的主引擎。 我总是发现自己有80％的时间解决小任务。
Another problem that I encountered almost every time was during deployment. First deployment is easy, you just put everything on a remote FTP and restore the database on your hosting provider’s server. It’s the subsequent deployments that complicate things. Although these systems usually feature a way to bring your development (or just local) changes to the live site, it tends to be a part of higher pricing tiers and it takes some time to learn and configure it.
我几乎每次遇到的另一个问题是在部署期间。 第一次部署很容易，您只需将所有内容放在远程FTP上，然后将数据库还原到托管服务提供商的服务器上即可。 后续部署使事情复杂化。 尽管这些系统通常具有将您的开发(或仅本地)更改引入实时站点的方法，但它往往是较高定价层的一部分，并且需要花费一些时间来学习和配置。
I explained the advantages of microservice architecture in . Nowadays, everyone calls this approach headless, because the key part of microservice architecture is headless CMS (for example ). It acts as a place where you store all the content and ensures delivery. The main benefit is that it is just another service. You are the new head of your website. You say how services are going to work with each other and which of them you will leverage. Headless CMS is just another service in the whole stack. But how do you do that?
我在解释了微服务架构的优势。 如今，每个人都称这种方法为无头的，因为微服务架构的关键部分是无头的CMS(例如 )。 它充当您存储所有内容并确保交付的地方。 主要好处是它只是另一项服务。 您是网站的新负责人。 您说的是服务如何相互配合以及您将利用哪些服务。 无头CMS只是整个堆栈中的另一项服务。 但是，你是怎么做的？
Let me show you that on my personal website. When a visitor comes, they expect to see something like this:
让我在我的个人网站上向您展示。 当访客来访时，他们希望看到以下内容：
The homepage of my website is just a simple HTML code with content. Now, there are two ways this HTML code can be created. Either we stick with the standard approach of building it all on the server:
我网站的主页只是带有内容的简单HTML代码。 现在，有两种方法可以创建此HTML代码。 我们要么坚持在服务器上构建所有内容的标准方法：
Or we cut our webserver some slack and compose the HTML code on the client:
或者我们将网络服务器削减一些，然后在客户端上编写HTML代码：
You see, the visitor’s browser accepts only data, not the whole HTML structure with content in it. But how does the browser know what to display? How to process the data and output them in our design?
您会看到，访问者的浏览器仅接受数据，而不接受其中包含内容的整个HTML结构。 但是浏览器如何知道要显示什么？ 如何在我们的设计中处理数据并将其输出？
We will tell the browser what to do through JavaScript. In the past, JavaScript was frowned upon. It has always been a rule of thumb that whenever you created JavaScript functionality, you had to do the alternative noscript version. But times have changed and browsers have developed. You still need to comply with some rules in order to make your website accessible, but more on that later.
我们将通过JavaScript告诉浏览器该怎么做。 过去，JavaScript不受欢迎。 始终的经验法则是，无论何时创建JavaScript功能，都必须执行替代的noscript版本。 但是时代变了，浏览器也发展了。 您仍然需要遵守一些规则才能使您的网站可访问，但以后会更多。
Using JavaScript for building a website has never been easier. There are many frameworks that help you achieve your goal even with minimal knowledge of plain JavaScript. And the best thing is that for some of them you do not need to install anything. Just your browser and favorite text editor are enough. But let’s start with the basics and select the best framework for our new websites.
使用JavaScript构建网站从未如此简单。 有许多框架可以帮助您实现目标，即使对普通JavaScript的了解最少。 最好的是，对于其中的某些人，您不需要安装任何东西。 仅您的浏览器和喜欢的文本编辑器就足够了。 但是，让我们从基础开始，为我们的新网站选择最佳的框架。
Overall there are 3 major JS frameworks that have a lot of traction and a great community around them. That ensures continuous development and support. A lot of successful websites are built on top of them, some of which you may use on a daily basis.
总体而言，有3个主要的JS框架吸引了很多人，并且周围有一个社区。 这样可以确保持续的开发和支持。 许多成功的网站都建立在它们之上，您可能每天都会使用其中一些。
Angular has the greatest history of these three. It was founded almost 10 years ago in 2009! It is developed and maintained by Google. Compared to other frameworks, it has more complex syntax based on TypeScript and will require you to set up a build process. However, it supports modularity and an MVVM model which allows applications built on top of Angular to be very robust.
Angular在这三个方面拥有最悠久的历史。 它成立于将近十年前的2009年！ 它由Google开发和维护。 与其他框架相比，它具有基于TypeScript的更复杂的语法，并且将需要您设置构建过程。 但是，它支持模块化和MVVM模型，从而使基于Angular构建的应用程序非常强大。
I remember using it for the first time in 2013 for a semi-government project where it enabled us to create fast front-end for managing all kinds of entities. It was so easy to create rich listings with paging, filtering and sorting functionalities.
我记得在2013年首次将其用于一个半政府项目，该项目使我们能够创建用于管理各种实体的快速前端。 创建具有分页，过滤和排序功能的丰富列表非常容易。
React was originally founded and open-sourced by Facebook in 2013. It is component-based which makes it easy to learn. Its components are implemented using JSX syntax, which sits between JavaScript and HTML. It is also easy to figure out initial architecture, as each component is like a module contributing to the output HTML. If you like Legos, you will like React!
React最初由Facebook于2013年创建并开源。它基于组件，因此易于学习。 它的组件是使用介于JavaScript和HTML之间的JSX语法实现的。 还很容易弄清楚初始架构，因为每个组件都像一个有助于输出HTML的模块。 如果您喜欢Legos，那么您将喜欢React！
It is possible to include it in website as a JS library or set up a build process and use TypeScript. React also has the biggest community and has a sibling called React Native which lets you build native mobile applications.
可以将其作为JS库包含在网站中，也可以设置构建过程并使用TypeScript。 React还拥有最大的社区，并拥有一个称为React Native的同级产品，可让您构建本机移动应用程序。
Vue was released in 2014 and is quickly growing — currently, it gets the biggest increase of traction in the community. It is very similar to React, but slightly easier for beginners. It shines with its detailed documentation and very easy integration. Components are based on simple HTML which makes it very easy for JavaScript beginners. It is also the lightest of these three.
Vue于2014年发布，并且正在Swift发展-目前，它在社区中获得了最大的吸引力。 它与React非常相似，但是对于初学者来说稍微容易一些。 它以详细的文档和非常容易的集成而引人注目。 组件基于简单HTML，这使JavaScript初学者非常容易。 它也是这三个中最轻的。
I personally used it on more advanced shopping cart scenarios in Prestashop and was amazed how quickly I was able to get it all working together without any previous Vue knowledge.
我个人在Prestashop中将它用于更高级的购物车场景中，并且惊讶于在没有任何Vue知识的情况下，我能够如此Swift地使它们全部协同工作。
If you wish to look at the comparison in depth, refer to great article by or on Medium.
如果你想看看深入的比较，指的是由伟大的文章或上中等。
When it comes to selecting the right framework, developers usually go for the one they have a previous experience with (if it was a good experience). But if you are new to front-end development, you need to look at the goals you set up for your website. The right choice highly depends on the project you are building. So let me summarize my expectations:
在选择正确的框架时，开发人员通常会选择他们以前有过经验的框架(如果这是一个很好的经验)。 但是，如果您不熟悉前端开发，则需要查看为网站设置的目标。 正确的选择很大程度上取决于您正在构建的项目。 因此，让我总结一下我的期望：
So you can see that in my case Vue.js fits the best. It is easy to use and integrate for beginners and has awesome documentation with easy tutorials. Write down your expectations and see if Vue.js fits them too.
因此，您可以看到Vue.js最适合我。 它对于初学者来说易于使用和集成，并且具有精妙的文档和简单的教程。 写下您的期望，看看Vue.js是否也适合他们。
The last point about content delivery is very important. All those JavaScript frameworks enable you to get content via REST API, but implementing raw API calls will be very time consuming and is not at all fun. Some headless CMS systems like provide an which is a wrapper around REST communication with many additional features. That will make content gathering much easier.
关于内容交付的最后一点非常重要。 所有这些JavaScript框架都使您能够通过REST API获取内容，但是实现原始API调用将非常耗时，而且一点也不有趣。 一些无头CMS系统(例如提供了的它是REST通信的包装，具有许多其他功能。 这将使内容收集更加容易。
The final architecture of the new website can look like this:
新网站的最终架构如下所示：
The first request for the website is resolved by returning a main HTML template with JavaScript files. When the browser starts processing the JavaScript logic, Vue.js will be initialized and it will bring our components to life. Each of those components then acts independently - displays HTML, fetches data from headless CMS, or posts data of form submissions to a forms webservice.
通过返回带有JavaScript文件的主HTML模板来解决对网站的第一个请求。 当浏览器开始处理JavaScript逻辑时，Vue.js将被初始化并将其组件带入生活。 然后，这些组件中的每一个都独立起作用-显示HTML，从无头CMS提取数据或将表单提交的数据发布到表单Web服务。
This architecture enables us to build our websites very quickly while actually enjoying it. It is like building a car with Legos. The website will be lightweight, fast and overall, much more cost-effective. But let’s leave the economics for another article. What is your experience? Have you tried microservices already?
这种架构使我们能够在真正享受网站的同时快速建立自己的网站。 这就像和乐高积木一起造汽车一样。 该网站将是轻量级的，快速的，整体的，更具成本效益的。 但是，让我们把经济学放在一边。 你有什么经验？ 您是否已经尝试过微服务？
翻译自:
短线技术指标最佳组合
转载地址：http://gfkzd.baihongyu.com/