Need advice about which tool to choose?Ask the StackShare community!
Apache Cordova vs ES6: What are the differences?
Apache Cordova: Platform for building native mobile applications using HTML, CSS and JavaScript. Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript; ES6: The next version of JavaScript. Goals for ECMAScript 2015 include providing better support for large applications, library creation, and for use of ECMAScript as a compilation target for other languages. Some of its major enhancements include modules, class declarations, lexical block scoping, iterators and generators, promises for asynchronous programming, destructuring patterns, and proper tail calls.
Apache Cordova and ES6 are primarily classified as "Cross-Platform Mobile Development" and "Languages" tools respectively.
"Lots of plugins" is the top reason why over 31 developers like Apache Cordova, while over 98 developers mention "ES6 code is shorter than traditional JS" as the leading cause for choosing ES6.
Apache Cordova is an open source tool with 766 GitHub stars and 327 GitHub forks. Here's a link to Apache Cordova's open source repository on GitHub.
Slack, StackShare, and ebay are some of the popular companies that use ES6, whereas Apache Cordova is used by Teleport, Hybrid Heroes, and JustWatch. ES6 has a broader approval, being mentioned in 1461 company stacks & 1725 developers stacks; compared to Apache Cordova, which is listed in 96 company stacks and 45 developer stacks.
This post is a bit of an obvious one, as we have a web application, we obviously need to have HTML
and CSS
in our stack. Though specifically though, we can talk a bit about backward compatibility and the specific approaches we want to enforce in our codebase.
HTML
: Not much explanation here, you have to interact with HTML for a web app. We will stick to the latest standard: HTML 5
.
CSS
: Again if we want to style any of our components within he web, we have to use to style it. Though we will be taking advantage of JSS
in our code base and try to minimize the # of CSS stylesheets and include all our styling within the components themselves. This leaves the codebase much cleaner and makes it easier to find styles!
Babel
: We understand that not every browser is able to support the cool new features of the latest node/JS features (such as redue, filter, etc) seen in ES6
. We will make sure to have the correct Babel
configuration o make our application backward compatible.
Material UI (MUI)
: We need to make our user interface as intuitive and pretty as possible within his MVP, and the UI framework used by Google will provide us with exactly that. MUI provides pretty much all the UI components you would need and allows heavy customization as well. Its vast # of demos will allow us to add components quickly and not get too hung up on making UI components.
We will be using the latest version of create-react-app
which bundles most of the above along many necessary frameworks (e.g. Jest for testing) to get started quickly.
For our front-end, React is chosen because it is easy to develop with due to its reusable components and state functions, in addition to a lot of community support. Because React is popular, it would be easy to hire for it here at our company MusiCore. Our team also has experience with React already. React can be written with ES6 and ES6 has a lot of popularity and versatility when it comes to creating classes and efficient functions. Node.js will be used as a runtime environment to compile the code. Node.js also has many different types of open-source packages that can help automate some of the tasks we want to do for the application. CSS 3 will be used to style components and is the standard for that.
Optimize-js
I will not describe this tool a lot here, because it's already good done by author on github
I just want to mention that this tool wrap up all immediately-invoked functions or likely-to-be-invoked functions in parentheses what is do a great optimization a JavaScript
file for faster initial execution and parsing (based on my experience).
The performance of application where I've introduced optimize-js
improved on 20% in a common (tested in Chrome
and IE11
).
- Clarification on Readme to the optimize-js
- Some of Nolan thoughts on the virtues of compile-time optimizations can be found in "Parens and Performance" – counterpost
Is it maintaining now? - Unfortunately, no (but feel free to send PR)
I've done some Hybrid Mobile apps with both technologies Apache Cordova
and React Native
and described my experience in my blog.
In a few words, I would suggest to use each technology in accordance what what is your current code base and what do you want to achieve.
React Native is a great option if you need that extra edge in performance with multi-threading and native UI rendering. Or you already have a web app based on React which you want to port to mobile.
On the other hand, if you have an existing web application code and you want to reuse some or all, including the ability to use web third-party libraries, then Cordova is the best option.
Proguard
?
ProGuard is the most popular optimizer for Java bytecode. It makes your Java and Android applications up to 90% smaller and up to 20% faster. ProGuard also provides minimal protection against reverse engineering by obfuscating the names of classes, fields and methods.
How to use it inCordova
app?
I didn't find any plugins for it. So I've implemented it by myself and shared it on GitHub.
Feel free to use!
Pros of Apache Cordova
- Lots of plugins48
- JavaScript35
- Great community26
- Easy Development25
- Easy to learn18
- Cross platform15
- Open Source7
- Easy, fast, not buggy in my experience with my code6
- Lots of descendants; PhoneGap, Ionic, Intel XDA etc6
- Can use CSS34
- Rich HTML 54
- Easy debugging4
- HTML, CSS and JS3
- Fast and hot reload3
- Rich css ui3
- Use what you code in your browser3
- Need a light system2
- Native Web Technologies2
- Without extra tooling needed2
- One code base everywhere2
Pros of ES6
- ES6 code is shorter than traditional JS109
- Module System Standardized52
- Extremly compact2
- Destructuring Assignment2
Sign up to add or upvote prosMake informed product decisions
Cons of Apache Cordova
- No native performance2
- Hard to install1
- Hard to install0
Cons of ES6
- Create Node.js1
- Suffers from baggage1