DOCSLIB.ORG

Choosing the Right Front-End Framework

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Choosing the Right Front-End Framework Choosing the right front-end framework Janko Ulaga, Tomislav Naki ć-Alfirevi ć May 2013 Introduction - needed to upgrade our UI - choosing the right framework: a challenge! - currently around 30 Java frameworks - not a simple process, many different criteria to consider * certain frameworks suggest or encourage certain technologies...not so good, right? UI prototype description - monitor & control system - table showing real time device state changes - graph showing parameter updates - form to set device parameter values Criteria - technical vs. business - in-house knowledge is great, but... - analyze & consider everything: in-house procedures, development, HTML5, licensing, testing, integration... Criteria - JSF & Vaadin for Java - ExtJS & AngularJS for JavaScript Vaadin Java Server Angular JS ExtJS Faces Popularity(# of 246,000 1,220,000 110,000 1,000,000 Google searches/ month) Learning( # of ~20 ~220 ~50 ~40 books on Amazon) Requires No but some No No Yes development components do license Java Server Faces Basics - component-driven UI design model, XML templates - requests processed by the FacesServlet which does all the heavy lifting - convention over configuration - inversion of control *great for rapid development, but lacks “shiny” components Which JSF framework? - popularity, showcases, extensions... - we chose Primefaces Vaadin Basics - code in Java - uses GWT for web page rendering - extensible components set - server side application logic Implementation - Primefaces - environment setup - easy design: one view/action subset – one backing bean - great to use with Twitter Bootstrap - easy to combine JavaScript *push component cannot connect to remote URL - quick solution with PE Extensions - high network traffic Implementation - Vaadin - environment setup - two additional plugins, charts and push - nice API - works great on all browsers - no need for JavaScript *not so good performance-wise, bad choice for real- time apps. *hard to combine with other technologies or resources Summary - what we measured? - why we measured it? - how we measured it? - what we omitted? Comparison table Vaadin JSF-Primefaces Convention over configuration NY Inversion of control YY Client side validation Y N(Y with JavaScript) Client size 28.6 MB 3.7 MB # of plugins used 2 1 Additional coding needed NY Aditional code complexity(1- 10) N/A 2 # of Java classes 11 8 Overall impression(1-10) 7 6 The data we got Vaadin JSF - Primefaces Browser memory usage 24.4 – 73.3 MB 75.8-116 MB CSS :24.2 KB / avg. 43 ms CSS :38.6 KB / avg. 77 ms Images :45.1 KB / avg. 167 ms Images :17.5 KB / avg. 81 ms Network usage Scripts :540 KB / avg. 276 ms Scripts :294.5 KB / avg. 181 ms Push :1.7 MB / min( 3.7 KB/push) Push :1.7 MB / min( 3.7 KB/push) DOM rendering 996 ms 577 ms Total time to load page 2.49 s 655 ms Server-side heap consumption Max used heap : 236 MB Max used heap : 197 MB * Vaadin'sServer side performance CPU usage was poorMax for usageover 50: 28.1% chart records, soMax measurements usage : 16.4% were made for 20 data pairs JavaScript finalists - right choice: compare Java with JS - Primefaces will be compared to the JS match-up winner - compare same measurement parameters JavaScript frameworks duel ExtJS AngularJS Browser memory usage 204 -244MB 12.3 –33.1 MB CSS :38.9 KB / avg. 207 ms CSS :123.3 KB / avg. 85 ms Images :15 KB / avg. 236 ms Images :12.7 KB / avg. 34 ms Network usage Scripts :~836 KB / avg. 849 ms Scripts :449.9 KB / avg. 101 ms Push :125 KB/min Push :125 KB/min DOM rendering 1.7 s 433 ms Total time to load page 1.7 s 494 ms Server-side heap consumption Max used heap : 139 MB Max used heap : 139 MB Server side CPU usage Max usage : 11.2% Max usage : 11.2% JavaScript vs Java- side by side JSF - Primefaces AngularJS Browser memory usage 75.8 –116 MB 12.3 –33.1 MB CSS :38.6 KB / avg. 77 ms CSS :123.3 KB / avg. 85 ms Images :17.5 KB / avg. 81 ms Images :12.7 KB / avg. 34 ms Network usage Scripts : 294.5 KB / avg. 181 ms Scripts :449.9 KB / avg. 101 ms Push :1.7 MB/min Push :125 KB/min DOM rendering 577 ms 433 ms Total time to load page 655 ms 494 ms Server-side heap consumption Max used heap : 197 MB Max used heap : 139 MB Server side CPU usage Max usage : 16.4% Max usage : 11.2% Final result - Primefaces – really easy to use - Angular JS – fast + a great prospect Q & A Session.
Load more

Recommended publications
  • Modern Web Application Frameworks
    MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY Û¡¢£¤¥¦§¨ª«¬­Æ°±²³´µ·¸¹º»¼½¾¿Ý Modern Web Application Frameworks MASTER’S THESIS Bc. Jan Pater Brno, autumn 2015 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or ex- cerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Bc. Jan Pater Advisor: doc. RNDr. Petr Sojka, Ph.D. i Abstract The aim of this paper was the analysis of major web application frameworks and the design and implementation of applications for website content ma- nagement of Laboratory of Multimedia Electronic Applications and Film festival organized by Faculty of Informatics. The paper introduces readers into web application development problematic and focuses on characte- ristics and specifics of ten selected modern web application frameworks, which were described and compared on the basis of relevant criteria. Practi- cal part of the paper includes the selection of a suitable framework for im- plementation of both applications and describes their design, development process and deployment within the laboratory. ii Keywords Web application, Framework, PHP,Java, Ruby, Python, Laravel, Nette, Phal- con, Rails, Padrino, Django, Flask, Grails, Vaadin, Play, LEMMA, Film fes- tival iii Acknowledgement I would like to show my gratitude to my supervisor doc. RNDr. Petr So- jka, Ph.D. for his advice and comments on this thesis as well as to RNDr. Lukáš Hejtmánek, Ph.D. for his assistance with application deployment and server setup. Many thanks also go to OndˇrejTom for his valuable help and advice during application development.
    [Show full text]
  • Alfresco ACSCE-5X Exam
    Alfresco ACSCE-5X Exam Volume: 60 Questions Question: 1 What is the class.org.alfresco.model.ContentModel used for? A. Transforming document content into a different format. B. Validating the content of the document follows a certain template. C. Referencing out of the box content model types in your code. D. Trigger automatic metadata extraction from the content. E. Moving content in the repository between folders. Answer: C Question: 2 When would you consider developing your custom server code in Java in place of JavaScript? (Choose three.) A. When a web script needs to be executed inside a transaction. B. When I need to execute part of my code as system user. C. When developing a custom scheduled process. D. When developing a content rule. E. When developing a behavior/policy. Answer: B,C,D Question: 3 Which file is required in order for an AMP file to be valid? A. module.properties B. service-context.xml Leading the way in IT testing and certification tools, www.examkiller.net Alfresco ACSCE-5X Exam C. file-mapping.properties D. web.xml Answer: A Question: 4 An Alfresco Webscript is called via a POST request to the URL /example/mycontent/item1, relative to the Alfresco Content Services REST API base URL. Based on RESTful principles and standards, what will be the result of this call? A. The existing resource ‘item1’ is updated. B. The existing resource ‘item1’ is updated. C. The content of the resource ‘item1’ is returned to the user. D. A new resource ‘item1’ is added. Answer: D Question: 5 How can we modify what data is shown in each row of the Alfresco Share document library, using the supported extension points? A.
    [Show full text]
  • Cross-Domain Embedding for Vaadin Applications
    Cross-Domain Embedding for Vaadin Applications Janne Lautamäki and Tommi Mikkonen Department of Software Systems, Tampere University of Technology, Korkeakoulunkatu 1, FI-33720 Tampere, Finland {janne.lautamaki,tommi.mikkonen}@tut.fi Abstract. Although the design goals of the browser were originally not at running applications or at displaying a number of small widgets on a single web page, today many web pages considerably benefit from being able to host small embedded applications as components. While the web is full such applications, they cannot be easily reused because of the same origin policy restrictions that were introduced to protect web content from potentially malicious use. In this paper, we describe a generic design for cross domain embedding of web applications in a fashion that enables loading of applications from different domains as well as communication between the client and server. As the proof- of-concept implementation environment, we use web development framework Vaadin, a Google Web Toolkit based system that uses Java for application development. Keywords: Vaadin, JSONP, cross-domain applications. 1 Introduction Web applications – systems that resemble desktop applications in their behavior but are run inside the browser – are becoming increasingly common. The current trend is that web pages have dynamic components side by side with the traditional web content, such as static text and images. These dynamic components can be small widgets that for instance display current weather information or stock exchange data, or even full-fledged web applications that offer a service related to the theme of the web page where they are located [1]. Creating dynamic web pages is much more complex than building plain old web pages.
    [Show full text]
  • Technology MX4 Technology MX4, Based in Canada, Is a Company That Works in the Field of Optimization Technologies for Complex Problems
    Technology MX4 Technology MX4, based in Canada, is a company that works in the field of optimization technologies for complex problems. About MX4 Technology MX4 is specialized in the development of web applications for K12 schools, which also includes providing training and user support. ZK x MX4 ZK is used in our main product called Trapeze School for the automatic creation of school timetables. The SAAS application targets K12 schools and can handle multiple school configuration and constraints. This tool is offered in 2 languages (French and English) and is being used by more than 150 schools across Quebec. “Simplicity (AJAX) and rapid The team is composed of 5 engineers; 1 for the User interface using development.” ZK and the others are working on the backend micro-services and AI engine. We started the project in 2011 and we have an ongoing delivery process to offer new features every 6 months. We use the following technologies in the project: ZK, Hibernate, Tomcat, Rest, Kafka, ActiveMQ and PostgreSQL. Why ZK We evaluated developing our web application in JSP and we built a small, but complete application that includes our principal needs using 3 different frameworks: OpenXava, Vaadin and ZK. ZK was the easiest and fastest one. ZK was the easiest to use in the sense that it hides and handles the AJAX part, so you don’t have to worry about passing information between the server and the client. As a result it saves the developing ZK – THE SIMPLEST WAY TO MAKE WEB APPLICATIONS RICH 2 CASE STUDY time a lot so we decide to go with ZK.
    [Show full text]
  • Programming Technologies for the Development of Web-Based Platform for Digital Psychological Tools
    (IJACSA) International Journal of Advanced Computer Science and Applications, Vol. 9, No. 8, 2018 Programming Technologies for the Development of Web-Based Platform for Digital Psychological Tools Evgeny Nikulchev1, Dmitry Ilin2 Pavel Kolyasnikov3 Ilya Zakharov5, Sergey Malykh6 4 MIREA – Russian Technological Vladimir Belov Psychological Institute of Russian University & Russian Academy Russian Academy Science Academy of Education Science, Moscow, Russia Moscow, Russia Moscow, Russia Abstract—The choice of the tools and programming In addition, large accumulated data sets can become the technologies for information systems creation is relevant. For basis for machine learning mechanisms and other approaches every projected system, it is necessary to define a number of using artificial intelligence. Accumulation of data from criteria for development environment, used libraries and population studies into a single system can allow a technologies. The paper describes the choice of technological breakthrough in the development of systems for automated solutions using the example of the developed web-based platform intellectual analysis of behavior data. of the Russian Academy of Education. This platform is used to provide information support for the activities of psychologists in The issue of selecting methodological tools for online and their research (including population and longitudinal offline research includes several items. researches). There are following system features: large scale and significant amount of developing time that needs implementation First, any selection presupposes the existence of generally and ensuring the guaranteed computing reliability of a wide well-defined criteria, on the basis of which a decision can be range of digital tools used in psychological research; ensuring made to include or not to include techniques in the final functioning in different environments when conducting mass toolkit.
    [Show full text]
  • Vaadin Custom Training
    STORY AND PHILOSOPHY Software is eating the world and what most of us see of it is the user interface. The user interface has become the key component of how the users experience the business behind it. Competition is lost or won due to user experience. Simplicity is king and the users get frustrated by anything ugly, slow or not working on the device they happen to use at the time. We at Vaadin fight for simplicity and invite everyone to join this fight. Together we want to build a user interface that puts a smile on the user’s face. Vaadin is the technology that empowers developers to build the best web-apps for business purposes. Our priority over everything else is developer productivity because we believe that by simplifying the developer experience and saving the developer’s time, they are best able to focus on building great user interfaces. Our brand is what we want everyone to think about us. When everyone - both us and the people around us - have a consistent understanding of what Vaadin is and what we Custom Training stand for, it enables that image to spread and amplify. This book defines what we want that image to be. It defines what the Vaadin brand is. I hope that You are as excited and proud of living and breathing the Vaadin brand as PRESENTER I am. You are the one who is shaping what everyone thinks about Vaadin - using this brand as a tool and a guideline every day. Sami Kaksonen Let’s fight for simplicity for both the users and the developers! [email protected] Joonas Lehtinen Founder & CEO Vaadin INTRODUCTION 5 TABLE
    [Show full text]
  • Curriculum Vitae – Onno Scheffers
    Curriculum Vitae – Onno Scheffers Curriculum Vitae Onno Scheffers Title: B.Sc. Nationality: Dutch th Birthdate: November 20 1974 Gender: Male Drivers license: A & B Onno Scheffers is a software developer in heart and soul. He knew he wanted to program at an early age. After finishing Atheneum (pre-university secondary education) and applied computer science at Hogeschool Rotterdam & Omstreken, Onno further specialized himself and became a certified Java specialist (SCJP, SCWCD, OCA, OCP). With over 17 years of professional experience as a Java developer, Onno is always on the lookout for new technical challenges. He’s flexible and works well in teams. Onno also likes training and supporting other developers. Whether it’s mobile applications, desktop application or enterprise web applications, Onno has helped many clients finish their projects successfully. 1/10 Curriculum Vitae – Onno Scheffers Education & Certification October 2017 Machine Learning by Stanford University on Coursera Certified with a 96.5% grade. June 2016 Oracle Certified Professional, Java SE 7 Programmer Passed the OCP exam with a 81% score. November 2015 Xebia - Scala Training May 2015 Oracle Certified Associate, Java SE 7 Programmer Passed the OCA exam with a 96% score. April 2014 Vaadin 7 Certified Developer Attended the Vaadin Fundamentals training and the Vaadin Advanced training in April and took the Vaadin certification in July. May 2011 Hippo CMS 7 Developer Training Two day Hippo CMS training at Hippo HQ in Amsterdam. April 2010 Sun Certified Programmer for the Java Platform, Standard Edition 6 Passed the exam with a score of 95%. March 2005 Sun Certified Web Component Developer for the Java 2 Platform, Enterprise Edition 1.4 January 2004 JBoss Advanced Training Internal JBoss training by Finalist IT-Group, with focus on configuration.
    [Show full text]
  • Vaadin-Intro.Pdf
    Vaadin introduction7 Intro to Vaadin new Label(“Hello world”) What’s QA new Getting started User interface framework for rich web applications User Interface Components Developer Rich Productivity UX java html 12Key Ideas3 Rich Components1 User Interface Data Source Theme 1.6 Going mobile GWT is a versatile technology that allows developers to create application UI for desktop, tablet, and mobile consumption. As can be expected, over 98% of apps support desktop browsers, but we found it interesting that tablets had overtaken phones (at least when it came to support from GWT-based apps). In US, the number of apps supporting tablets was as high as 46%, while it was just 34% in Europe. Desktop browsers 1.6 Going mobile GWT is a versatile technology that allows developers to create application UI for 1.6 Going mobile desktop, tablet, and mobile consumption. As can be expected, over 98% of apps “Since gwt is used extensively support desktop browsers, but we found it interesting that tablets had overtaken GWT is a versatile technology that allows developers to create application UI for phones (at least when it came to support from GWT-based apps). In US, the number in the enterprise, this may of apps supporting tablets was as high as 46%, while it was just 34% in Europe. 98.1%desktop, tablet, and mobile consumption. As can be expected, over 98% of apps explain why tablets are more support desktop browsers, but we found it interesting that tabletsTablets had overtaken Tablets phones (at least when it came to support from GWT-based apps).
    [Show full text]
  • Rich Web Applications in Server-Side Java Without Plug-Ins Or Javascript
    Rich Web Applications in Server-side Java without Plug-ins or JavaScript Joonas Lehtinen, PhD Vaadin Ltd - CEO vaadin.com/vaadin @joonaslehtinen Rich Web Applications in Server-side Java without Plug-ins or JavaScript Joonas Lehtinen, PhD Vaadin Ltd - CEO vaadin.com/vaadin @joonaslehtinen ? Vaadin is a UI framework for rich web applications java html History behind Vaadin healthcare portal, >100 kloc of perl, .. web 1.0, netscape, ie5, ie6, ... 1998 healthcare portal, 100 kloc of perl, .. web 1.0, netscape, ie5, ie6, ... thinking of object oriented design, desktop, Java, U and I ... desktop programming paradigm for web! found desktop programming paradigm for web! found 2000 millstone ajax google web toolkit re-released as 2002 2005 2008 millstone ajax goolge web toolkit re-released as 2009 Used by >50.000 developers in >150 countries Building apps for fortune 500, startups, governments, ... across all industries Collaborating by conributing > 200 plug-ins and helping plug-ins, mainstream each other on a forum with >1500 posts / m 2010 2011 Backed by 50+ person full-time team see our transparent vaadin.com/roadmap 2012 Apache License Contents Server-side Discussion RIA What is it? Pros & cons? Vaadin Technology, Features, Getting started In practice Coding a Vaadin application step-by-step Server-side RIA “Web 1.0” Client Server 5 HTML Page DOM over HttpResponse View 4 Model 3 Parameters over HttpRequest Controller 2 DB 1 client-side ria fat client Client-side RIA Client 4 Server Requested data View to view as XML / JSON 5 DOM Model 3 1
    [Show full text]
  • Stavros Kefaleas Tel : +30 6948591535 (10Am – 5Pm) Citizenship : Greek ▪ Date of Birth : May 20Th, 1974 E-Mail : [email protected]
    Contact Stavros Kefaleas Tel : +30 6948591535 (10am – 5pm) Citizenship : Greek ▪ Date of birth : May 20th, 1974 e-mail : [email protected] skype : skiabox Address Ipirou 58, 41222 Larisa, Greece Key Skills - Programming Languages Java (5 years), Java EE, Javascript (ES6) (5 years), Php (3 years), Perl, Python, Html, C, C++, Objective- C, C# (4 years), VB.NET - Operating systems Windows, Unix, Linux - Software Packages Office (ECDL Expert), DreamWeaver, Photoshop, Netbeans, Xcode, Visual Studio Code, IntelliJ Idea Ultimate, JFreeCharts, Telerik Suite, DevExpress Suite, WebStorm, PhpStorm, PyCharm - Frameworks Spring Core, Spring MVC, Vaadin, .NET Framework, ASP.NET AJAX Toolkit, ReactJS (4 years), Angular, Redux, Laravel - Database Programming MS SQL Server, MySql, Postgresql, Hibernate, Jetty, MongoDB - Applications Servers Tomcat, JBoss, Glassfish - Other technologies Maven, Crystal Reports, CSS - Stock Market Packages Advanced Get, Metastock, Wealth Lab Developer Personal Blog : https://devcanvas.org / Stackoverflow account : stackoverflow.com/users/881739/skiabox Certifications : teamtreehouse.com/stavroskefaleas - https://devcanvas.org/certifications/ Github Repositores (81) : https://github.com/skiabox Latest Projects : https://devcanvas.org/otw_pm_portfolio/ Unix and Linux experience - Working with Unix since 1992 - Perl scripting - Python scripting - Regular expressions - Experience with many linux distributions eg Red Hat, Arch Linux, Slackware, Ubuntu - Experience with Bash shell Education 2015 Bachelor of Science (Honours)
    [Show full text]
  • Web Technologies
    JAINx Web Technologies Web Technology is the language of computers. It is the most important element in the creation of robust websites and web applications. It involves the coding and programming side of development and covers everything from a simple page of HTML text to complex, feature-rich applications designed to be accessed from various internet-connected devices. The web has grown to a larger market for most businesses, enterprises are investing in creating and expanding their online presence. The already existing demand for web developers is projected to grow by 13% from 2018 to 2028, much faster than the average for all other occupations. Our Web Technologies Catalogue can help you be future-ready for the expanding industrial requirement. The 150+ courses will assist you with learning and practising website development and design with trending programming languages and frameworks. You will be provided hands-on experience in the latest client, and server-side programming practices and use of database programming and popular programming languages like Java, Python, PHP, Angular, Node, etc. These latest web design software programmes and online web design courses taught by domain experts will certainly simplify the process of learning web development for you. Subscribe today to start learning from our Web Technologies catalogue! • Number of Courses in the Catalogue - 157 Courses • Proficiency Levels Available • Basic - 39 Courses • Intermediate - 49 Courses • Advanced - 37 Courses • Comprehensive - 14 Courses • Leading to Industry
    [Show full text]
  • Liferay Third Party Libraries
    Third Party Software List Liferay Portal 6.2 EE SP20 There were no third party library changes in this version. Liferay Portal 6.2 EE SP19 There were no third party library changes in this version. Liferay Portal 6.2 EE SP18 There were no third party library changes in this version. Liferay Portal 6.2 EE SP17 File Name Version Project License Comments lib/portal/monte-cc.jar 0.7.7 Monte Media Library (http://www.randelshofer.ch/monte) LGPL 3.0 (https://www.gnu.org/licenses/lgpl-3.0) lib/portal/netcdf.jar 4.2 NetCDF (http://www.unidata.ucar.edu/packages/netcdf-java) Netcdf License (http://www.unidata.ucar.edu/software/netcdf/copyright.html) lib/portal/netty-all.jar 4.0.23 Netty (http://netty.io) Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0) Liferay Portal 6.2 EE SP16 File Name Version Project License Comments lib/development/postgresql.jar 9.4-1201 JDBC 4 PostgreSQL JDBC Driver (http://jdbc.postgresql.org) BSD Style License (http://en.wikipedia.org/wiki/BSD_licenses) lib/portal/commons-fileupload.jar 1.2.2 Commons FileUpload (http://commons.apache.org/fileupload) Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0) This includes a public Copyright (c) 2002-2006 The Apache Software Foundation patch for CVE-2014-0050 and CVE-2016-3092. lib/portal/fontbox.jar 1.8.12 PDFBox (http://pdfbox.apache.org) Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0) lib/portal/jempbox.jar 1.8.12 PDFBox (http://pdfbox.apache.org) Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0) lib/portal/pdfbox.jar 1.8.12 PDFBox (http://pdfbox.apache.org) Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0) lib/portal/poi-ooxml.jar 3.9 POI (http://poi.apache.org) Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0) This includes a public Copyright (c) 2009 The Apache Software Foundation patch from bug 56164 for CVE-2014-3529 and from bug 54764 for CVE-2014-3574.
    [Show full text]