Augmented Reality and web technologies: and the winner is…
I’d like to share some research findings with you on the most popular JavaScript technologies for web development in the context of a challenge we’re taking on at Flux IT. We wanted to augment the way information is seen at our La Plata and Buenos Aires offices, starting with the relationship that fluxers have with the spaces and room event schedules, using Augmented Reality for all this. This challenge came to life through an application we’ve called “Pixi.”
Before getting started, let me point out that this isn’t just one more article (like the thousands online already) that gives you the pros and cons of each technology, or picks out the best one. I’ve always thought they’re all the best in their own way and that everything depends on what you’re using them for, and every programmer has his or her personal preference.
When I joined this project, our goal was to make the place more tech-savvy and build a solution to solve this need. One of the challenges was integrating the app into a web framework (or library) that would help us create a Progressive Web Application (PWA) and make it easy to integrate with the awe.js library at the same time.
As a team, we decided to treat this project like a high intensity training session with cutting-edge technology that would give us an innovative product and amp up our knowhow. So, I took on the challenge of researching the latest web technologies, figuring out which one would be the best bet for our development.
Try it all, hang on to the good stuff
According to The State of JavaScript (an annual survey given to developers all over the world), the most-used technologies right now are: React, Angular and Vue.js. Here I’ll give you some highlights on these 3 technologies:
DOM (Document Object Model) management:
While Angular utilizes ‘regular’ DOM, React and Vue.js use what we call ‘Virtual Dom’, which is just a JavaScript object that represents the real DOM, letting you modify elements on the web-page faster.
Component Model:
All of them have Component-Based Architecture. These are easy to create since the UI and the logic are all defined in the same place.
Now Vue.js relies on a Single File Components model, so it can implement components with logic, template and styles in just one file. React follows a similar model, but with its inline styling it’s harder to maintain the application.
Templating:
Angular and Vue.js use traditional HTML for their components, and its syntaxes are similar (e.g., v-if vs ng-if); while React uses a new syntax, called JSX, that lets you write HTML in JavaScript.
Flexibility:
They all have routing and REST API consumption mechanisms, to name a few examples.
On the other hand, React and Vue.js let you incorporate other libraries for these functions, which gives you greater flexibility when creating the application architecture.
PWA support:
They all have a CLI, which creates a project with PWA support.
Awe.js integration:
It’s easy to integrate Awe.js into all 3 technologies, including it in the project dependency just like any other JavaScript library. To render awe.js content (3D objects, animations, text, etc.), all you need is a container (“div”) when you start the application, which makes it easier to use in whatever option you choose.
Preference or need?
At first, my idea was to convince the team to use React, the technology that we’re working with on an important media project right now and which I’ve become a huge fan of. A lot of people say it’s complex and hard to learn because it uses a lot of intermediate-advanced JavaScript concepts, but for me, that’s exactly why you’d want to learn it. Even if it becomes obsolete sometime in the future, you won’t be sorry you learned how to use it, because you’ll end up knowing a lot more about JavaScript than when you started.
But in spite of my personal preference, I chose to go with something new and immerse myself in the world of Vue.js and all its features, not forgetting the needs of the project, naturally. We opted for this framework, not just because it’s easy to learn, but also because it shows a lot of (improved) Angular 1 and React concepts, it can be used without a compiler system (only including it in the HTML file), and it has good API documentation and reference.
For those who wish to learn a bit more, take a look at this article which discusses a lot of other important details to consider when comparing Vue with other frameworks.
The problem with front-end development is that the JavaScript ecosystem can be very volatile; the technology is changing constantly. So, if you want to learn any of these, I suggest you stop wasting time making comparisons. Don’t look for the easiest, most powerful or popular one either. It might be better to learn something that will be useful in the long run for you as a developer. Pick one of them (or try them all) and get to work. Program, test, explore. That’s the best way to learn.
