A practical guide to selecting your web frontend framework

When starting a new web application project, choosing the preferred web frontend framework can often be a long and serious point of discussion. In this article, we hope to provide developers with a guide to selecting a suitable web frontend framework for different types of projects. JavaScript or TypeScript When we talk about frontend web development in the year 2023 and for probably the next few years, we’re basically talking about a framework for either JavaScript or TypeScript. The two programming languages are fairly similar, with TypeScript being a superset of JavaScript. This means that all valid JavaScript code is also valid TypeScript code. They share the same fundamental syntax, which includes variables, loops, conditionals, functions, and objects. Arguably all frontend developers would know how to program in JavaScript. TypeScript is not as popular, but as it is fairly similar to JavaScript, most JS programmers can adopt TypeScript given enough time and willingness to learn. Framework Popularity and Community Support The next factor to consider is how popular the framework is and how active the support is around it. The popularity of a framework dictates how easy it is to recruit developers for your project, research and get answers in developer forums, find plugins and extensions for it, and how often it gets updated and upgraded. While there are easily dozens or more TypeScript and JavaScript frameworks around, most web developers would agree that the ones that are currently most popular and most actively supported are React, Angular, and Vue.js. All three are free and open-source frameworks used by a large number of applications and websites with active development and support communities. Hence, let’s focus our further analysis on these three frameworks. What is React? React was initially released in 2013 and is created and maintained by Meta (formerly Facebook). React is often used for creating single-page applications and mobile applications, but it can be applied to various types of web development. What is Vue.js Vue.js (often referred to as Vue) is an open-source JavaScript framework for building user interfaces released in 2014. It is designed to be a progressive framework, which means you can use as much or as little of it as you need, making it easy to integrate into existing projects or start new ones. Vue.js is often lauded for its simplicity, flexibility, and ease of use. Vue was created by Evan You, who also maintains it along with a core team of developers, unlike the other two frameworks discussed here, which are supported by large companies, What is Angular? Angular or Angular 2+ is a complete rewrite of AngularJS and was released in 2016. It is a comprehensive open-source framework for building dynamic, single-page web applications. Google and a group of developers are responsible for developing and maintaining it. Angular is distinct from React and Vue in that it provides a complete solution for building web applications, not just the view layer. It is also unique in its use of TypeScript as its programming language, as opposed to JavaScript for the other two. Comparative Analysis of Angular, React, and Vue Aspect Vue.js React Angular 2+ Initial Release 2014 2013 2016 Popularity Growing rapidly Extremely popular Widely adopted Learning Curve Easier, especially for beginners Moderate; JSX knowledge required Steeper learning curve Architecture Component-based Component-based Component-based, MVVM architecture Data Binding Two-way data binding One-way data binding (Uni-directional) Two-way data binding Rendering Virtual DOM Virtual DOM Real DOM Template Syntax HTML-based with directives JSX (JavaScript XML) HTML-based with Angular-specific syntax State Management Vuex (official state management) Flux/Redux (external libraries) RxJS and built-in state management Size & Performance Smaller bundle size, fast initial load Smaller bundle size, fast initial load Larger bundle size, slower initial load Community & Ecosystem Growing community, versatile ecosystem Vast and active community; extensive ecosystem Mature community, wide ecosystem Integration with Other Libraries Good integration with various libraries Easily integrates with third-party libraries Tight integration with Angular-specific libraries Development Speed Faster development due to simplicity Fast development with a large developer community Slower development due to complexity Official CLI Tool Vue CLI Create React App Angular CLI Selecting the right frontend framework While we have narrowed it down to three frameworks you can choose from, the table above shows that there are still decision points needed to select which three would be the most applicable for your project. Simple Projects = Vue Vue is often an excellent choice for simple projects due to its minimal learning curve. It’s lightweight and easy to pick up, making it a great option for smaller applications or prototypes that will help you reach the market sooner. React is also a viable option and has the advantage of popularity, which makes it easier to recruit and get community support. Angular might be overkill for simple projects that won’t be expanding any time soon. Medium-complexity Projects = React (Vue and Angular as a close second) For moderately complex system development, all three would have their merits for utilization, with React probably being the slight leader in terms of ease of support, developer recruitment, and platform maturity. Vue can still be viable for its faster learning curve, growing popularity, and community support; while Angular is a good option especially if scaling up the system in the near future is likely. High-complexity Projects = Angular Angular’s extensive features and strong architectural patterns make it a robust choice for large-scale enterprise applications. While React and even Vue can and have been used for larger systems, they’re not really designed for this type of scale, and long-term code maintenance and support might prove more difficult. Other points of consideration Team Expertise If your current team is already adept in one of the three frameworks, then selection would obviously skew toward what the team is already familiar with. Do keep in mind the caveats, especially when using Angular for simpler projects or Vue or React for highly complex ones. Integration Requirements If the project will be interfacing with third-party systems, then the choice of framework would
Web and Software Division Website
The new Web and Software Development Division Website is now on-line! The site will focus on the products and service offerings of the web and software division of EACOMM Corporation. The site is powered (ofcourse!) by our very own DO-CMS Enterprise Edition ver. 3. Visit it here: http://web.eacomm.com Coming Soon is the 10th Anniversary Version of EACOMM’s Corporate Website!
Upcoming Projects from EACOMM Corporation
It has been a few months since this blog has been updated and this is mainly because we have had to hunker down and complete a few major projects these past few weeks. However, with our tenth anniversary coming on August 2011, we are hoping to launch a number of new products and services to coincide with the momentous event. Below are a few of the projects we have that are already in the pipeline: Updated PhilippineCompanies.com – With now over 15,000 visitors daily and a few thousand dollars in monthly advertising revenue, we can no longer treat this website as a ‘hobby’. Work is underway to streamline the system and make it more robust and user-friendly. First to be launched will be the more powerful company profile engine before the end of this year. New EACOMM Corporation Website – As per our tradition of changing our website every 2-3 years, expect a new look www.eacomm.com by first quarter 2011. DO-CMS Version 4.0 – We are hoping to find the time next year to do a full revamp of DO-CMS and bring it closer to the bleeding edge of Web Technologies. Expect further announcements early next year. Business Apps – We’ve been mentioning our business apps projects all throughout this year and albeit we won’t be able to launch any by the end of the year, we are fully confident that a few applications will be ready before our Anniversary. This would include: Web-based Payroll and HR Management Software – This application will be made available both on a subscription model (SaaS) or deployed in the company’s own servers. The project is in early stages of Alpha Development and we hope to have it ready before mid-2011. Web-based Accounting System – Currently under heavy development using Microsoft’s .NET Framework and targeted for completion by end of 2010. Expect a translation to our favorite LAMP platform before the end of 2011. Web-based Vehicle Repair and Preventive Maintenance System – Ideal for car dealers or companies with a large car fleet. This application monitors repair and maintenance records for automobiles. Beta prototype will be available for evaluation before the end of 2010. Other Web Portals – As some of you may know, EACOMM also maintains other web portals such as www.artesdelasfilipinas.com, www.imagesphilippines.com, and www.philippinepropertyfinder.com. Expect this to be joined by at least two more websites before the end of 2010 and perhaps up to half a dozen more by next year! Tablet Applications – We are confident that Tablets will be a mainstay of computing in the next few years and as such we will be investing heavily in developing applications for this new platform. EACOMM has almost a decade of experience in PC Touchscreen Kiosks and Web Application Development and as such we feel we are in an excellent position to leverage this experience to cater to the touch-screen tablets and even smartphone market. For more information about any of the projects mentioned above, please feel free to e-mail info@eacomm.com or call us via +63 2 438 2986.
DO-CMS Community Edition Version 3.03 Released
Major update of DO-CMS Community Edition that includes: 1. Clean URLs – Default support for SEO friendly URL’s. 2. Upgraded Newsletter Engine – Now includes reports and statistics on newsletters sent out (how many people read it, what links were clicked, etc…) 3. Integrated user’s manual – the User’s Manual can now be viewed from the CMS panel. 4. Contact Us Database – CMS Database of visitors who used the contact us page of the website. 5. Fixed some minor bugs and stability issues. Download it now at http://sourceforge.net/projects/do-cms DO-CMS Community Edition is the open source version of DO-CMS, EACOMM Corporation‘s award-winning website content management system.
Speed up your Website with this Simple Page Cache Script for PHP
For dynamic websites, database queries take up a significant amount of the CPU resources of your servers. For medium to high traffic websites in shared or virtual hosting services, this could mean significant loss of traffic due to too much database queries or over use of shared CPU time. As such, it is quite useful to have some sort of cache system for your dynamic pages, particularly those with content that don’t change too much or too often anyway. Below is a very simple and generic cache script for PHP web pages which you can copy-paste and use almost instantly in your website. What it does is store an instance of the dynamically generated web page as an HTML file and it then counter checks with a predefined time period that you set whether to display the cached instance or to dynamically generate the page again. The longer the time period between dynamic generation, the greater the savings in terms of CPU usage and database queries. 1. First create a folder in your hosting account where you’ll be housing the cached data. In this example the cache folder is located at http://www.yourdomain.com/cache 2. Next, copy-paste the script below at the start of the PHP page you want cached. We are assuming here that the dynamically generated page is utilizing the GET variable “id”, such as: http://www.yourdomain.com/index.php?id=XXXX: 3. At the bottom of your PHP page, copy-paste the code below: 4. You’re done! Upload and update your PHP file.
Choosing a Web Hosting Provider
Choosing a Web hosting provider is perhaps the most difficult task for the new webmaster. There are literally hundreds if not thousands of web hosting providers in the Internet and the sad truth is a vast majority of these are not very good. Additionally, we all have different criteria on judging whether a host is good or not. Here are some questions to ask to help you make this very critical decision: 1.      Quality of Service/Uptime Commitments – Do you need your site to be 99.99% up? Or are a couple of days of downtime in a year perfectly ok? Hosts that provide up-time commitments are typically more expensive than those that do not. 2.      Technical Support – Do you expect/need phone support? Or are you happy with just e-mail support? Regardless of your preference, make sure your hosting provider gives a fast reply to any technical support request. Response times of over 24 hours when your email is down is UNFORGIVEABLE, regardless of how cheap you’re paying your provider. 3.      Shared vs. Dedicated – Another critical question you need to ask yourself is whether you need a dedicated server space or you’re fine with shared hosting. Dedicated server essentially means you have a server all to yourself while shared server space means you share a server and its resources with several other clients of the company. For sites with heavy traffic, resource requirements or unique applications then a dedicated server would be more logical. However, sites getting only a few hundred visitors per day would usually do perfectly fine on a shared server. 4.      Company Reputation/Reviews – It is absolutely critical you research hard before settling for a web hosting provider. Ask friends their experience with their hosts, and google heavily for reviews and commentary on hosting providers you’re eyeing. Note that EVERY hosting provider has its good and bad points and it is really a question of what your own priorities are that will ultimately guide your decision. Luckily, sites such as Web Hosting Choice provides a helpful start for those of you looking for a new web host.
Innovative Applications using Asterisk Open Source PBX
This was presented in Asterconference Roadshow Manila last February 2, 2007. Finally posted here, for posterity. Download the Presentation in PDF Format here: Innovative Applications of Asterisk Open Source PBX
EACOMM Corporation Website Version 5
Welcoming the new year, EACOMM is proud to launch the 5th version of its corporate website since the company’s inception in 2001. The new website features detailed interactive scenery with a retro, film-noir look developed in Flash. The website is managed through the latest version of EACOMM’s Dynamic Online Content Management System which features new features such as allowing for editing of Flash content as well as integration with Google’s Application suite. The site’s use of CSS 2.0 would also allow us to change the layout much more often and offer different layouts simultaneously in the future. The site is also designed to showcase the entire skill-set of EACOMM Corporation from Interactive Multimedia and Animation as seen with the various Flash scenes, to High-end Web Programming as showcased in the various dynamic content and interactive forms. For a blast from the past, visit the Web Archive which has our last three website layouts on record (for some reason the very first site was never stored). Version 1 (2001) was pure HTML and only had less than 10 web pages. Version 2 “Classic Black” (2002-2003) featured a number of online forms developed in PHP and writing to MySQL database. However, the main site content remained mostly HTML-based with a some small flash animation elements. Version two also included our first efforts in Search Engine Optimization of the website. Version 3 “United Colors of EACOMM” (2003-2005) featured a lively intro page and heavily SEO’d content. Some content were already content managed during the latter part of this version’s existence. Version 3 was also the first site hosted outside of EACOMM’s in-house web server for increased accessibility from the US/Europe. Version 4 “The Tree House” (2005-2007) This website was the first EACOMM website to fully utilize DO-CMS for content management. It feature original artwork from Visual Artist Robert Deniega. Further additions to the site includes this Blog website, a Japanese Version of the Website and other division sub-sites. Expect improvements and additions to the Current Website as we move forward through 2008 and beyond. Happy New Year to Everyone! EACOMM Corporation Web Team
PHP Everywhere! December 1, 2007
PHP User Group Philippines, Inc. (PHPUGPH), a non-profit organization established to provide support for LAMP (Linux Apache MySQL PHP) and open-source enthusiasts in the Philippines, will be holding it’s 1st ever PHP Developer’s Conference on December 1, 2007 (1-day event)/9am-6pm. This is in follow-up with last Aprils successful event, a gathering of professional LAMP developers, web freelancers and companies utilizing OSS (Open-Source Software) technologies for enterprise use. The goal for this upcoming conference is to spread the news of using OSS solutions such as Linux, Apache, MySQL, PHP and some Web 2.0 technologies in wider audiences such as universities and training institutions. Many noted members of our group are certified and professionally affiliated with leading company in the industry such as Barclays, UN-IOSN, Yahoo! Singapore, Accenture, Mobius Asia and some semi-conductor/electronics like Intel, Atmel, Amis, which has some open source software deployed in production environment. Last Aprils event was sponsored as listed below that capture’s local IT industry attention and it is our aim to widen the coverage this coming December’s event with your support. Contact ajbatac–at–phpugph.com for more details.
WAMP Installation Guide
WAMP Installation Guide WAMP (Windows-Apache-mySQL-PHP) is an all-in-one packages which installs the basic programs you will need to get a localhost running and to be able to build and run PHP scripts. This guide will walk you through installing a WAMP package for the first time. Step 01: Open WAMP website. Step 02: Open the DOWNLOADS page. Step 03: Choose version to install. *note: Ask supervisor which version to use. Step 04: Installing older version. Step 05: Installing older version: Re-direction to download page. Step 06: Installing older version: Checking which WAMP version to use. Step 07: Choosing download mirror and downloading. Step 08: Run the installer file. Step 09: Run the installer file: License Agreement. Step 10: Run the installer file: Saving Directory Step 11: Run the installer file: Creating Start Menu Folder Step 12: Run the installer file: Auto-launch WAMP on Startup Step 13: Run the installer file: Confirmation of Installation Settings Step 14: Run the installer file: Saving Document Root Folder Step 15: Run the installer file: Default Browser and Finishing the Installation Step 16: Manually Starting WAMP Server Step 17: Testing the LOCALHOST NOTE Step 01: Open the WAMP website at http://www.wampserver.com/en/index.php. You should be able to see a page like this: [Back to Top] Step 02: Click the DOWNLOADS link. [Back to Top] Step 03: Ask your OJT supervisor which versions of mySQL and PHP would you be using. If it is ok to use the newest available version of WAMP then click the DOWNLOAD link to install. Proceed to Step 07 if you would do this step. [Back to Top] Step 04: If you would require a version of WAMP with older version/s of either Php, mySQL, or phpmyAdmin click on the PREVIOUS VERSIONS link. [Back to Top] Step 05: You will be directed to the download page of all the older versions of WAMP, such as below. Scroll down and click the VIEW OLDER RELEASES link. [Back to Top] Step 06: You will then be directed to a page such as below. To check which version of WAMP has the versions of the programs you need, scroll down and click on any of the NOTES links in the page, as illustrated below. It will direct you to a page such as below. Scroll down to search for the appropriate version that suits your requirements. Return to the previous page after taking note of what version you will use, then select the version you would need to use. [Back to Top] Step 07: Whether or not you would need to download the newest version of WAMP, you would be directed to a page where you would select mirrors for the download. You could choose any mirror you would like but personally I would advice choosing either Japan or Taiwan as a mirror, or any Asian country for that matter (they?re closer to the Philippines). You should be able to see a page like this: After choosing a mirror, save the file to your computer. [Back to Top] Step 08: Once download finishes, run the installer file. [Back to Top] Step 09: In the license agreement click [I accept the agreement], then click next. [Back to Top] Step 10: Select the directory where you would like to install WAMP. [Back to Top] Step 11: Select the start menu folder where you would like to place WAMP?s shortcuts. [Back to Top] Step 12: In the additional tasks you may select if WAMP would be loaded on startup or no. If its most likely that you would be programming PHP as soon as you start your computer (most likely yes) then I suggest you select the checkbox. Otherwise you may opt to leave it unchecked and turn on the WAMP server manually. [Back to Top] Step 13: This is the confirmation screen of the options you have selected. Click back to modify your install settings or click next to start the installation. [Back to Top] Step 14: Some time midway into the installation a window will pop-up asking for the directory where to save the document root folder. It is recommended that you leave it as it is and click ok to continue the installation. [Back to Top] Step 15: After the said pop-up another window will appear asking for you default browser. If you have no preference for browsers just hit Open. If not search for the .exe file of your preferred browser then click Open to continue the installation. Once the installation is finished, click finish. [Back to Top] Step 16: To manually start the WAMP server, click Start>Programs>WampServer or [name you assigned in Step 15] >start WampServer. This is illustrated below: [Back to Top] Step 17: Open your preferred browser and type in the address bar LOCALHOST. It should display the WAMP homepage like below, signifying a successful installation. Click this link to try launching the localhost > http://localhost [Back to Top] NOTE: Always remember to enable the WAMP server (if it isn’t already enabled) as illustrated in Step 16 whenever you want to test any page in the localhost. [Back to Top]
June 6, 2007 Hacking Incident
On Early morning Philippine time, some of our virtual servers hosted with Dreamhost were broken into and a number of webpages vandalized. EACOMM provides hourly, daily and weekly backups of all its web sites and as of noontime of June 7, most, if not all websites have been recovered to its original state. This marks the second time EACOMM servers have been hacked in the company’s six years in existence. At both times recovery of all client sites took approximately 24 hours. For our clients, please notify web@eacomm.com of any further problems with your webpages that might have been overlooked during the recovery process. Please understand that we had to recover a few dozen websites in a span of just 24 hours so please forgive our support team if your specific site or webpage was overlooked. Despite of this we stand by our choice of using Dreamhost for most of our website hosting needs, however,if any client wishes to be hosted elsewhere, please notify web@eacomm.com and we will provide you viable alternatives to our main hosting servers. EACOMM currently maintains 2 Virtual Servers in the United States, 1 Dedicated Server in the UK, and 2 Dedicated servers in the Philippines. Note that web hosting prices vary depending on which server you prefer. For more information about the hacking incident, Dreamhost’s official report on the matter is posted here: http://www.dreamhoststatus.com/2007/06/06/security-breach/  EACOMM CORPORATION WEB DIVISION
EACOMM Corporation On-Line Store
EACOMM Corporation is proud to launch its on-line store. The on-line store offers various products and services offered by EACOMM Corporation such as: Digium TDM Cards Grandstream IP Telephony Equipment Elisha Hosted PBX Solutions DO-CMS Website Design and Development And much much more! We offer FREE SHIPPING to Metro Manila for all our products and Fixed rate shipping to other locations in the Philippines.The store currently accepts Paypal as its preferred payment gateway. Note that Paypal now accepts payments from the Philippines so feel free to order online now!
FH-MSI.com Launched!
EACOMM Corporation is pleased to announce the newest DO-CMS Powered Website: Friendly Hills Medical Services Incorporated (FH-MSI). FH-MSI.com is one the first sites to utilize the newest, more user friendly, more secure version of DO-CMS. DO-CMS allows users with little or no knowledge of HTML to easily update and maintain a website. Find out how DO-CMS can make your website fully interactive yet easy to maintain by emailing us here: info@eacomm.com.
Sinski Website Launched
EACOMM announces the launching of the new Sinski Motorcycles Philippines Incorporated Official Website: http://www.sinski.com.ph. Features Javascript rotating product pictures and click to enlarge functionality. Another proud member of the ever growing DO-CMS family.
FormsPHILIPPINES.com
EACOMM has just launched the Live Alpha version of FormsPHILIPPINES.com. FormsPHILIPPINES aims to provide a comprehensive collection of Public domain, Philippine government forms all in one location. Visit the site at: http://www.formsphilippines.com. Formsphilippines.com is a joint collaboration between EACOMM Corporation, Universal Matrix Corporation, and former Executive Secretary Ruben D. Torres
Open Source Software Customization, Installation, Support, Maintenance and Training
Choose among FREE, open source applications and contact us for help in customizing and installing them. At a mere fraction of what it will otherwise cost you, you’ll have a robust, fully functional and expandable application running in as little as HOURS. Here are but a few of the Open Source applications we support, each one considered by most webmasters as the best in its respective classes: OSCommerce – Open Source E-Commerce/Webshop platform WordPress – Blogging Software. Moodle – Powerful E-learning software. PHProjekt – Web-based Groupware Software. PhpBB – The most popular Bulletin Board Engine around. Mambo CMS – Popular Content Management System. Media Wiki – the software engine running the popular on-line encyclopedia: Wikipedia.org.
The New Catalog Online
CITEM-DTI in close partnership with EACOMM Corporation launches the new version of Catalog Online, a comprehensive listing of Philippine exporters of products and services. Click Here to View the Website