网址没封的来一个,seo网络营销课程,wordpress word插件,昭通高速装配式建筑公司网站虽然 JavaScript 凭借其简洁性、交互性等优势横扫了各大编程语言榜单#xff0c;但是一直以来#xff0c;JavaScript 应用程序的工具链极其复杂#xff0c;引发不少开发者吐槽#xff0c;在此#xff0c;我们是否有更好的解决方案将其替代#xff1f;接下来#xff0c;本… 虽然 JavaScript 凭借其简洁性、交互性等优势横扫了各大编程语言榜单但是一直以来JavaScript 应用程序的工具链极其复杂引发不少开发者吐槽在此我们是否有更好的解决方案将其替代接下来本文中将分享几个 JVM 的替代方案希望对大家有所裨益。作者 | Renato Athaydes译者 | 弯月责编 | 屠敏出品 | CSDN(IDCSDNnews)以下为译文我是一个主要从事后端的开发人员但时不时地也需要做一些前端工作。因为有时在个人的项目中也会用到前端。出于这个原因我一直在远远地关注JavaScript的发展但说实话我并不喜欢JavaScript的世界。我最不喜欢的一点是专业JavaScript应用程序的工具链极其复杂。从前你只需要写几行HTML然后用浏览器打开(file:///home/me/index.htlm)即可在添加动态效果的时候只需要链接一个简单的JS文件然后刷新一下页面就好了但是这样的日子已经一去不复返了。JavaScript的MDN页面(https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript)上展示的方法才是正确地使用HTML和JS的方法——不需要构建工具也不需要框架。然而很少有人听得进去。如今JavaScript的工具链包含了后端工具链所有的复杂性有过之而无不及。甚至就在几年前工具链的许多部分和现在都是不同的看看StackOverflow上一些问题的答案(https://stackoverflow.com/questions/1480186/what-is-in-your-javascript-toolchain)你会有觉得很有意思。这个Pluralsight JS开发环境(https://github.com/coryhouse/javascript-development-environment)建议你利用32种工具来构建你的应用程序(例如babel、chai、cheerio、eslint、mocha、webpack ......)。2016年的这篇文章(https://italonascimento.github.io/configuring-a-basic-environment-for-javascript-development/)中记录了在Google和DuckDuckGo中搜索基本的JS开发环境时搜索结果中包含哪些工具依赖管理工具(npm或yarn)模块打包(webpack或gulp、browserify、bower)ES6编译(babel)任务自动化(npm脚本)实时重新加载(live-server)如果你按照上述文章的说明操作那么最终会得到3个配置文件(npm、babel和webpack每个工具各一个)你需要通过嵌入到JSON配置文件的shell脚本来管理构建的过程而且你的项目需要通过编译和实时重新加载HTTP服务器才能运行。我认为如果我需要编译东西那么至少我应该使用编译器来检查我的代码那么为什么不试试TypeScript呢于是我按照这个教程(https://alligator.io/typescript/new-project/)所说创建了一个TypeScript项目。创建好后除了前面提到的那些配置文件之外我还多了两个配置文件tsconfig.json和tslint.json。这一切太复杂了所以Google创建了一个工具(Google TypeScript Style简称GTS)来管理TypeScript配置。我曾尝试使用这个工具然而由于一些模块相关的错误浏览器拒绝运行我的JavaScript文件。我不知道在我使用的无数的工具中哪一个可以解决这个问题我快被这种错综复杂的工具逼疯了于是我决定寻找其他的解决方案在寻找的过程中我发现了这篇优秀的博客文章(https://itnext.io/you-might-not-need-a-build-toolchain-324edcef7f9a)文中宣称你不需要构建工具链。这篇文章表明你可以使用像React这样的现代工具就不需要构建工具了然而不幸的是一旦你开始使用依赖项而且你的应用程序包含几百行以上的JavaScript代码那么这种方法就不太实用了。我又回到了原点。似乎无论我们做什么构建/编译步骤都是一个避无可避的恶魔而且长期以来在后端的开发工作中我们了解了如何使用优秀的工具编写大型应用程序所以何妨在前端的开发中也尝试使用这些工具呢毕竟早在2011年当我还在做Web开发时就有人尝试这种做法了……例如2011年我曾使用过GWT(这是一个基于Java的Web工具包)……当然8年后基于Java的Web应用程序应该有了很多改进不是吗于是我开始检查都有哪些工具可以用。一个习惯了使用Java世界里优秀的工具和良好生态系统的后端开发人员能否进军前端的工作而不至于被JS世界里的疯狂湮没呢就让我们拭目以待吧方法为了在本文中比较每一种备选的方案我决定仿照上述我提到的博客文章“不需要构建工具链”创建一个非常简单的计数器应用程序。作为参考以下是用React(没有JSX)编写的应用程序的代码。我比较不同备选方案的方法非常简单找一个入门教程然后通过运行演示的应用程序感受设置的难易程度。检查框架与Java开发人员期望的契合程度。使用产品/框架提供的最基本的工具创建计数器应用程序。衡量应用程序的大小、代码行数和性能。最后一个要点的灵感来自这篇博客文章“前端框架的真实比较”(https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075)。应用程序大小是通过查看浏览器的网络选项卡来确定的(为了避免使用依赖于大量非JS资源的框架我包含了所有类型的资源)。对于性能我使用了Google Chrome自带的Lighthouse。以下是使用React的结果仅供参考。为了进行比较我选择从本地服务器(而不是CDN)上下载并提供React JS文件。应用程序的大小性能好了以上就是我们的对比标准。现在让我们来看看最原始的基于Java的Web工具包GWT。GWTJava-source-to-JS服务器和客户端框架网址http://www.gwtproject.orgGWT是第一个在没有Applet或插件的情况下在浏览器中使用Java的工具创建于2006年。这是一项非常成熟的技术但自2013年以来Google支持的框架不再支持GWT……我记得当时Google将其Web开发工作的重点放在了Dart上而Dart作为JS的替代方案与GWT有着直接的竞争关系而且当时的GWT社区已被人遗弃。不知怎地GWT这个项目依然存在所以我觉得我必须把它包含在这个比较中这样才能真正看出现代替代方案的状况。如果你想使用GWT那么可以按照官网的建议下载SDK或安装Eclipse插件……我已经有很多年没碰过Eclipse了(我改用了IntelliJ)所以我决定下载SDK./webAppCreator -out gwt-app com.athaydes.GwtApp这个命令运行得非常快而且还创建了一个Ant项目(什么东西)。我使用Java的时间已经超过了10年而且我错过了Ant的鼎盛时期——如果我没记错的话Maven是Java的构建工具。但我不介意Ant稍后我可以将其转换为Gradle或Maven构建。而且IntelliJ可以很好地支持Ant项目所以你可以在IntelliJ中打开这个项目而且一切都会正常工作。运行演示应用程序ant devmode这一步可以打开一个Swing应用程序你可以通过它控制开发服务器我感觉它与2009年一模一样在浏览器上打开这个应用后我发现除了一些新鲜的样式之外这个应用也几乎没有变化。演示应用会向你展示如何使用GWT最强大的功能无缝的RPC框架让开发人员几乎忘记了客户端和服务器之间的区别两者之间的通信犹如调用Java方法一样简单。但是在构建计数器应用的时候我们并不需要两者之间的通信。所以我做的第一件事就是从入门应用中删除RPC的代码。一般来说GWT应用程序只包含一个源代码根它分为客户端仅在浏览器中运行的客户端代码。服务器服务器端代码即后端。共享客户端和服务器皆可见的代码。你可以通过应用最顶层软件包的GwtApp.gwt.xml文件设置应用客户端可以看到哪些软件包。该文件还可以控制应用应该使用的GWT主题因此你可以很轻松地在应用中使用黑暗主题。在这个入门的应用程序中Java源代码位于src/目录下而Web的源代码位于war/目录中。初始页面的HTML文件是war/GwtApp.index.html。打开这个文件你可以看到一个非常普通的HTML但奇怪的是大部分视图都已经实现了(利用我想用自己的代码实现视图所以我删除了这个在基于小部件的API的帮助下在GWT中实现用户界面是一件非常容易的事情。因此我在5分钟内就创建计数器应用(请不要忘记我之前有过使用GWT的经验即便我几乎什么都想不起来了)。但是当我尝试重新编译代码时遇到了lambdas的错误——ant文件说我们需要使用Java 7为什么没人更新呢GWT支持Java 8所以我将其更新到了Java 8然后一切都正常了。以下是我在GWT中实现计数器应用的代码package com.athaydes.client;import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.ui.*;import java.util.function.Consumer;public class GwtApp implements EntryPoint { public void onModuleLoad() { RootPanel.get( content ).add( new Counter() ); }}class Counter extends Composite { private int value; Counter() { HorizontalPanel buttonsPanel new HorizontalPanel(); buttonsPanel.setSpacing( 10 ); Button up new Button( Increment ); Button down new Button( Decrement ); Label out new Label(); Runnable update () - out.setText( The current count is value ); update.run(); Consumer handler ( increment ) - {if ( increment ) {value; } else {value--; } update.run(); }; up.addClickHandler( clickEvent - handler.accept( true ) ); down.addClickHandler( clickEvent - handler.accept( false ) ); buttonsPanel.add( up ); buttonsPanel.add( down ); VerticalPanel root new VerticalPanel(); root.setSpacing( 20 ); root.add( buttonsPanel ); root.add( out ); initWidget( root ); }}看起来不错。实时地重新加载适用于超级开发模式可以快速地修复用户界面中的小问题。编译出该应用的生产版本ant build生成的JS文件放在war/gwtapp目录中。通过war目录就可以在浏览器中运行应用所以我只需在IntelliJ中打开war/GwtApp.html然后单击右上角的浏览器图标就可以让IntelliJ启动一个负责运行HTML文件的HTTP服务器并在我想要的浏览器中打开HTML文件。结果表明该应用运行良好。应用程序的大小性能TeaVMJava-bytecode-to-JS编译器网址http://teavm.org/TeaVM这个项目据称可以将Java字节码转换成JavaScript和Webassembly。 因为它不需要Java源代码所以它也可以用于从Kotlin和Scala(以及其他基于JVM的语言)进行编译。如果你想学习使用TeaVM那么需要使用Maven archetype$ mvn -DarchetypeCataloglocal \ -DarchetypeGroupIdorg.teavm -DarchetypeArtifactIdteavm-maven-webapp -DarchetypeVersion0.5.1 archetype:generate这一步会创建一个标准的Java项目根据Maven的约定你可以在提示框中输入项目的保存目录。Java源代码位于src/main/java而Web的index.html等文件位于src/main/webapp目录中。以下是我编写的计数器的Java代码package com.athaydes;import org.teavm.jso.dom.html.HTMLButtonElement;import org.teavm.jso.dom.html.HTMLDocument;import org.teavm.jso.dom.html.HTMLElement;import java.util.function.Consumer;public class Client { public static void main( String[] args ) { HTMLDocument document HTMLDocument.current(); HTMLElement div document.createElement( h2 ); div.appendChild( document.createTextNode( TeaVM CounterApp ) ); document.getBody().appendChild( div ); div.appendChild( new Counter().build() ); }}class Counter { private int value 0; HTMLElement build() { HTMLDocument document HTMLDocument.current(); HTMLButtonElement up ( HTMLButtonElement ) document.createElement( button ); up.appendChild( document.createTextNode( Increment ) ); HTMLButtonElement down ( HTMLButtonElement ) document.createElement( button ); down.appendChild( document.createTextNode( Decrement ) ); HTMLElement out document.createElement( p ); Runnable update () - out.setInnerHTML( The current count is value ); Consumer handler ( increment ) - {if ( increment ) { value; } else { value--; } update.run(); }; up.listenClick( ( event ) - handler.accept( true ) ); down.listenClick( ( event ) - handler.accept( false ) ); update.run(); HTMLElement div document.createElement( div ); div.appendChild( out ); div.appendChild( up ); div.appendChild( down );return div; }}有趣的是Java Counter组件仅包含34行代码比React.js(55行以上的代码量)少很多运行如下命令编译$ mvn package该命令会像往常一样编译所有的Java代码并在target/classes目录中生成.class文件(与普通的Java项目一样)但它还会在target/-/teavm下创建JavaScript代码我的项目名为mytea因此相应的目录为target/mytea-1-0-SNAPSHOT/teavm。在运行该应用程序时你只需启动Web服务器即可将目录target/mytea-1-0-SNAPSHOT/挂出来。应用程序的大小性能JSweet带有库生态系统的Java-source-to-JS(和TypeScript)编译器网址http://www.jsweet.org/JSweet可以将Java源代码编译为TypeScript和JavaScript。Java库可以作为TypeScript库发布。与其他备选方案不同Java代码可以与JS / TS代码互相转换如果你想学习使用JSweet那么我推荐你从GitHub克隆快速入门的项目$ git clone https://github.com/cincheo/jsweet-quickstart.git$ cd jsweet-quickstart$ mvn generate-sources同样Java项目会使用标准的Maven约定将Java源代码放入src/main/java中。然而Web资源会直接放在webapp目录下。与TeaVM不同JSweet编译器根本不会生成类文件这就是为什么你只能运行mvn generate-sources来生成JS代码而无法使用更常见的mvn package或mvn install。最终我写的Java代码几乎与TeaVM一样(但有一点例外JSweet API选择java.util.function.Function作为点击处理程序而不是Consumer因此必须返回一个值用lambda来编写这段代码就会很尴尬你需要使用大括号并强制返回null)package quickstart;import def.dom.HTMLButtonElement;import def.dom.HTMLElement;import java.util.function.Consumer;import static def.dom.Globals.document;public class QuickStart { public static void main( String[] args ) { HTMLElement div document.createElement( h2 ); div.appendChild( document.createTextNode( JSweet CounterApp ) ); document.body.appendChild( div ); div.appendChild( new Counter().build() ); }}class Counter { private int value 0; HTMLElement build() { HTMLButtonElement up ( HTMLButtonElement ) document.createElement( button ); up.appendChild( document.createTextNode( Increment ) ); HTMLButtonElement down ( HTMLButtonElement ) document.createElement( button ); down.appendChild( document.createTextNode( Decrement ) ); HTMLElement out document.createElement( p ); Runnable update () - out.innerText The current count is value; Consumer handler ( increment ) - {if ( increment ) { value; } else { value--; } update.run(); }; up.onclick ( event ) - { handler.accept( true );return null; }; down.onclick ( event ) - { handler.accept( false );return null; }; update.run(); HTMLElement div document.createElement( div ); div.appendChild( out ); div.appendChild( up ); div.appendChild( down );return div; }}应用程序的大小性能CheerpJ完全在浏览器上实现JVM网址https://leaningtech.com/cheerpj/CheerpJ绝对是最疯狂的选择(甚至可能是你见过的最疯狂的项目)实际上它并不是Java到JavaScript的转换器……其实它是一个完整的Java运行时没错它可以完成更传统的JVM可以执行的所有操作。线程、文件系统(显然它通过IndexDB模拟文件系统)、反射、类加载、网络等等。如果这还不足以让你头晕目眩那么就让我们来看看CheerpJ的入门教程。这个入门教程可以让你感受如何在没有插件的情况下在浏览器上运行包含Swing应用(记住Swing面向桌面系统的多平台Java UI框架)的编译好的jar。它运行的不是applet它真的是在浏览器中运行Swing代码而且还没有插件说出来连我自己都不相信所以让我们一起来看看这个入门教程吧。为了方便起见我将这些步骤进行了如下总结下载Swing应用程序的jar。使用本地Java运行这个jar。安装CheerpJ(据说你必须手动下载并放在你的主文件夹下)。确认你安装好了python3(对啊我也觉得很奇怪使用CheerpJ的时候还需要用到Python)。运行~/cheerpj_1.3/cheerpjfy.py TextDemo.jar。创建一个index.html文件。让Web服务器指向当前目录。目前看起来这个入门教程行不通啊因为你一直卡在了加载中……但是你需要漫长的等待长到你开始怀疑人生但最后终于成功了这个Swing应用跟我在本地Java上运行的应用相同但它嵌入到了浏览器的网页中在Ubuntu上运行Swing TextDemo在浏览器中通过CheerpJ运行Swing TextDemo如果你有现成的Swing应用那么可能CheerpJ适合你。但是如果你想要写一个新的应用那么你可能不想选用CheerpJ。我尝试使用CheerpJ对DOM的支持(发行包中包含cheerpj-dom.jar文件)来实现计数器应用但是我在10分钟内遇到了2个bug。而且这两个bug很麻烦我完全无法继续……更别提我必须将每个Java String都包装成对Global.JSString()的调用给CheerpJ开发人员的一点提示将你的jar放入Maven库中(Java开发人员都不愿意将依赖项硬编码到本地文件)千万不要放在目录下绝对行不通另外你需要习惯语言的约定不要调用Java方法set_onclick你应该调用setOnClick谢谢。我准备放弃CheerpJ了但后来我想起了此次实验的一项承诺使用产品/框架提供的最基本的工具创建计数器应用程序。无奈只能硬着头皮继续了。对CheerpJ来说似乎实现用户界面的基本工具即是JVM本身这个JVM提供了一个UI工具包Swing从Java 12开始Swing是随JVM一起发布的唯一UI工具包……JavaFX已经成为一个独立的项目。不管怎样CheerpJ只支持Swing。所以如下是我在纯Swing中实现的计数器应用import javax.swing.*;import java.awt.*;import java.util.function.Consumer;public class Main implements Runnable { Overridepublic void run() { JFrame frame new JFrame( CheerpJ Demo ); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); frame.setSize( 400, 80 ); frame.add( new Counter() ); frame.setVisible( true ); } public static void main( String[] args ) { SwingUtilities.invokeLater( new Main() ); }}class Counter extends JPanel { private int value; public Counter() { JButton up new JButton( Increment ); JButton down new JButton( Decrement ); JLabel out new JLabel(); Runnable update () - out.setText( The current count is value ); update.run(); Consumer handler ( increment ) - {if ( increment ) {value; } else {value--; } update.run(); }; up.addActionListener( event - handler.accept( true ) ); down.addActionListener( event - handler.accept( false ) ); JPanel buttonsPanel new JPanel(); buttonsPanel.add( up ); buttonsPanel.add( down ); JLabel title new JLabel( CheerpJ CounterApp (Swing) ); setLayout( new BorderLayout() );add( title, BorderLayout.PAGE_START );add( buttonsPanel, BorderLayout.PAGE_END );add( out, BorderLayout.CENTER ); }}你完全可以在桌面系统上正常运行这完全就是一个普通的Swing应用首先我们需要创建普通的jarmvn package然后用Java运行java -jar cheerpj-swing/target/cheerpj-swing-1.0-SNAPSHOT.jar结果如下在Ubuntu中运行计数器应用疯狂的是你也可以在CheerpJ的浏览器中运行该应用。看一看浏览器上的“网络”选项卡你会发现非常有趣的东西它一直在下载东西显然每个Java的标准库包都有一个JS文件CheerpJ会根据需要下载它们。应用程序的大小性能为了方便你了解该应用有多糟糕请参照Lighthouse 提供的如下诊断信息这是我第一次看到Avoid enourmous network payloads的诊断我绝对会遵循这个建议Vaadin FlowJava-source-to-JS-source服务器和客户端框架网址https://vaadin.com/flow很久以前我就听说Vaadin是一个基于GWT的框架……但似乎他们最近创建了一个基于Web组件的产品Vaadin Flow。我喜欢网络组件所以我决定试试看。入门教程的页面里有几个选项可以创建与Spring或CDI等集成的项目。我选择了我能找到的最基本选项Project Base因为我想要的只是一个客户端应用程序。我按照说明下载了zip而且只用了几分钟就可以让这些代码运行了。这是一个熟悉的Maven项目(我希望Gradle成为最受欢迎的选择但显然情况并非如此)......我没有看到index.html文件这有点令人惊讶。浏览器是如何加载应用程序的呢不管怎样我们只需要一个命令就可以运行这个应用mvn jetty:run然后访问http://localhost:8080就能看到正在运行的应用。看一下这个巨大的POM文件(一个hello world应用就有139行的代码)似乎他们使用了jetty-maven-plugin。所以我再一次选用了我最喜欢的选项IntelliJ服务器来提供index.html文件。然而情况开始有点混乱这对我来说有点太神奇了......当然我是一名Java开发人员但也没关系我还是可以应付一两个HTML文件。在我改代码的时候似乎服务器重启了所以我感觉它可能在实时重新加载。这很好但不幸的是虽然不知道服务器在干什么但是它并没有实时地重新加载我的代码。我试过几次刷新页面却导致了几处报错看起来像Vaadin应用不喜欢页面刷新(应用处于调试模式不过我估计它背后的工作太多了结果因自身的复杂性而崩溃)。但是编写UI的Java API非常出色非常易于使用和学习显然是为Java程序员编写的让我感觉宾至如归简直太好了如下是我编写的计数器应用你有没有觉得这段代码很酷package com.example.test;import com.vaadin.flow.component.Composite;import com.vaadin.flow.component.button.Button;import com.vaadin.flow.component.html.Div;import com.vaadin.flow.component.html.H2;import com.vaadin.flow.component.html.Paragraph;import com.vaadin.flow.component.orderedlayout.VerticalLayout;import com.vaadin.flow.router.Route;import java.util.function.Consumer;Route( )public class MainView extends VerticalLayout { public MainView() { H2 header new H2( Vaadin Flow CounterApp ); add( header, new Counter() ); }}class Counter extends CompositeDiv { private int value; Counter() { Paragraph out new Paragraph(); Runnable update () - out.setText( The current count is value ); update.run(); Consumer handler ( increment ) - {if ( increment ) { value; } else { value--; } update.run(); }; Button up new Button( Increment, event - handler.accept( true ) ); Button down new Button( Decrement, event - handler.accept( false ) ); getContent().add( out, up, down ); }}为了测量这个应用的性能我通过如下命令在生产模式下运行了该应用$ mvn jetty:run-exploded -Pproduction-mode感觉这个页面非常生气勃勃即便没有经过特殊的设计页面风格也非常好。应用程序的大小注意这个Vaadin的计数器应用至少需要312KB才能运行(主要是因为一个巨大的HTML文件vaadin-flow-bundleJS资源的总大小只有46.7KB)……这比我想象的还要多。性能在运行应用时Chrome在控制台上显示了一个警告这有点让人担心。似乎Vaadin在很早就采用了HTML导入等实验性的功能而现在这些功能都被弃用了。很可惜但是如果他们能够持续更新这个产品的话这应该不是一个大问题。Vaadin比JSweet和TeaVM慢一点但公平地说这个版本的计数器比其他版本更强大尽管这并非我所愿(有没有办法从Vaadin应用中删除样式和字体)Bck2BrwsrJava-bytecode-to-JS编译器网址http://wiki.apidesign.org/wiki/Bck2BrwsrBck2Brwsr始于2012旨在创建一个能够快速启动并百分百在现代浏览器中运行的小型Java。然而与CheerpJ不同它未能实现完整的JVM只有一小部分功能可以在浏览器上运行更类似于TeaVM因为它也是将Java字节码编译成JS。apidesign.org上有一个看起来很旧的wiki页面(http://wiki.apidesign.org/wiki/Bck2Brwsr)说明了如何使用bck2brwsr。页面上建议的一种做法是使用Bck2BrwsrViaCLI还有一种是Knockout4Java。我并不是很想使用Knockout.js(它自2015年左右开始就在JS的世界中失宠了)所以我选择了CLI。我按照wiki所说运行Maven原型创建了一个新项目$ mvn archetype:generate -DarchetypeGroupIdcom.dukescript.archetype -DarchetypeArtifactIdknockout4j-archetype -DarchetypeVersion0.26 -Dwebpathclient-web小心wiki页面上给出的命令最后一行少了一个反斜杠而且命令中的版本是0.16当前版本应该是0.26。然后编译并打包应用$ mvn package 警告这一步会打开一个带有JUnit Browser Runner的弹出窗口。我没想到会弹出这个窗口……不过没关系我们继续wiki页面上说我们可以通过以下命令运行带有FXBrwsr的应用$ mvn -f client process-classes exec:exec但是我在运行这个命令的时候收到了如下的错误Exception in thread main java.lang.IllegalStateException: Cant find any Fn.Presenter at net.java.html.boot.BrowserBuilder.showAndWait(BrowserBuilder.java:255) at com.athaydes.Main.main(Main.java:16)[INFO] ------------------------------------------------------------------------[INFO] BUILD FAILURE[INFO] ------------------------------------------------------------------------我快速搜索了Google结果什么都没找到(我猜测他们没有在Linux上测试)所以我尝试了一下在真正的浏览器中运行应用$ mvn -f client-web clean package -DskipTests bck2brwsr:show结果又遇到了另外一个错误[ERROR] Failed to execute goal on project bck2brwsr-web: Could not resolve dependencies for project com.athaydes:bck2brwsr-web:jar:1.0-SNAPSHOT: Could not find artifact com.athaydes:bck2brwsr-js:jar:bck2brwsr:1.0-SNAPSHOT - [Help 1]这是一个Maven经典的问题有时你需要把你的应用放到某些插件可见的地方……通常你可以通过下述命令解决这个问题$ mvn install然后再次运行命令启动应用看似没问题但应用毫无反应。检查控制台果然出错误了VM69 bck2brwsr.js:6 Uncaught Cannot find com.athaydes.BrowserMainw VM69 bck2brwsr.js:6v VM69 bck2brwsr.js:2r VM69 bck2brwsr.js:2load (async)z VM69 bck2brwsr.js:3r VM69 bck2brwsr.js:4w VM69 bck2brwsr.js:6n.loadClass VM69 bck2brwsr.js:6(anonymous) index.html:28我翻看了代码……希望找到一些可以帮助我了解这个问题的东西结果却什么都没找到……然而我找到了大量的XML。准确地说在4个Maven pom文件中找到了931行XML。我还发现该项目包含3个Maven模块client、client-web和js。js模块包含一个Java类其中包含一些标记为native的方法还用JavaScriptBody进行了注释其中包含实现方法的JavaScript代码但是嵌入到了Java Strings中。client模块包含一个bootstrapping主类以及一个带有更多注释的DataModel类似乎是为了将数据模型绑定到视图同时尝试使用js模块中声明的函数。它引用了另一个名为Data的类然而源代码中并没有这个类……它是在编译项目时自动生成的。而我却搞不清楚这个类是由什么生成的。可能深埋在1000行的pom中吧。client-web模块包含缺少的类com.athaydes.BrowserMain。因为这是我们在上述Maven命令中运行的模块所以我不明白为什么浏览器找不到这个类。我希望能够使用DOM API来创建UI就像之前的一些示例一样。我想了很多办法最终只发现了一些NetBeans API这绝对不是我想要的东西。似乎唯一可以与网页交互的方法就是通过HTML文本上的data-bind属性其背后的支持是Knockout.js我以为我已经避开了Knockout但是看看“CLI”页面上显示的Maven原型的ID吧也许我可以通过可怕的JavaScriptBody注释直接在Java Strings中编写JavaScript代码(请别这么干……理智一点)但我并不想知道这样是否可行。我觉得做了这么多尝试就够了。因为几乎没有文档可以帮助我调试这个问题在线搜索答案也是浪费时间——根本就没有答案。我很抱歉无法在这篇文章中给出有关bck2brwsr性能的实际数据虽然我花了一天的时间却未能成功。我觉得我可以说除非你有迫不得已的理由否则就不应该碰任何与这个项目相关的东西包括DukeScript。你可能会注意到整个bck2brwsr文档甚至源代码中多次引用了DukeScript。DukeScript的入门页面中显示的示例与我使用的Maven原型创建的示例完全相同如此看来这两个项目似乎密切相关尽管Dukescript创始人说bck2brwsr只是项目的一小部分而且也属于实验性质另外他们也支持TeaVM。结论让我们看看最后的结果我没有将Bck2brwsr包含在内因为我未能调试成功。如果有人能告诉我问题所在那么我会更新下面的结果。性能* FCP First Contentful Paint(此值用于打破性能相同的工具之间的联系)应用程序的大小代码行数代码行数不包括导入和注释。总结问题性能至关重要答案那么你应该选择JSweet或TeaVM。问题你喜欢占用空间较小的方案答案那么JSweet可以轻松胜任但TeaVM也相当不错。问题你希望维护的代码库最小答案那么Vaadin Flow非常棒。其他方案都非常接近所以这个因素不会产生太大的影响......但它们都能够轻松击败React问题你想要一些尽可能接近普通Java的东西答案如果你关心UI组件的话可以选择Vaadin Flow如果你关心业务逻辑的话则可以选择TeaVM。问题你希望尽可能接近JS生态系统但仍使用Java工具答案那么JSweet非常适合你。问题你想要的东西是Java但希望在浏览器中运行答案那么JSweet非常适合你。问题你想尝试一些与Java不同的东西而不是JS答案Elm是一种现成的函数式编程语言旨在创建Web应用程序。它有很棒的工具包括一个很棒的IntelliJ插件所以非常适合那些一直想要功能的Java开发人员另外一个理想的选择是Dart它与Java非常相似但有很多语法糖所以常见的功能都很容易实现。Ant带有很棒的工具包括实时重新加载的服务器还包括类似于Angular和React等的框架(如果你需要的话)。如果你对JVM备选方案与Dart的比较感到好奇那么我可以告诉你我已经将Dart的实现添加到了我的GitHub代码库中。比较结果如下应用程序大小79KB性能100(FCP1.4s)代码行数31。本文中显示的所有代码都上传到了如下GitHub代码库中包括React.js和Dart实现。https://github.com/renatoathaydes/jvm-alternatives-to-js原文https://renato.athaydes.com/posts/comparing-jvm-alternatives-to-js.html本文为CSDN翻译转载请注明来源出处。【END】作为码一代想教码二代却无从下手听说少儿编程很火可它有哪些好处呢孩子多大开始学习比较好呢又该如何学习呢最新的编程教育政策又有哪些呢下面给大家介绍CSDN新成员极客宝宝(IDgeek_baby)戳他了解更多↓↓↓ 热 文 推 荐 ☞ 李彦宏候选工程院院士陌陌回应探探下架拼多多回应“刷单”质疑 | 极客头条☞ 华为硬核招聘程序员| 极客头条☞ 他 25 岁进贝尔实验室32 岁创建信息论40 岁办达特茅斯会议 | 人物志☞真の硬核粉丝小学生也参加杨超越杯作品优秀☞ 阿里半跪过任正非差点跳楼京东被骗光钱成年人的生活哪有容易二字☞不改变比特币, 如何扩容?☞强推盘点阿里巴巴 15 款开发者工具 | 程序员硬核评测☞17篇论文入选CVPR 2019百度AI都在关注什么(附论文地址)☞ 她说为啥程序员都特想要机械键盘这答案我服System.out.println(点个在看吧);console.log(点个在看吧);print(点个在看吧);printf(点个在看吧\n);cout 点个在看吧 Console.WriteLine(点个在看吧);Response.Write(点个在看吧);alert(点个在看吧)echo 点个在看吧你点的每个“在看”我都认真当成了喜欢
