“Progressive Web Apps are experiences that combine the best of the web and the best of apps.” (Google Developers). Brief, to the point, and encompassing, in just a few words, all the reasons why PWAs have gained so much popularity over the last few years!
They sure carry loads of potential to shape the future of mobile web in the years to come!
Now let's try a “guessing game” and see if we can guess why you've chosen to build a progressive web app instead of sticking to optimizing your current site for mobile:
they're... progressive: they work regardless of the used web browser
they're not connectivity-dependent: not only that they don't need internet connectivity to run, but they do load fast even in the context of a terrible network performance
they run on modern web technologies
they're “clusters” of app-like features
they're installable: users get to add them to their own home screens and to reuse them with a simple click on their shortcuts
they're responsive out-of-the-box
they're not constrained to refresh entire web pages when they're loading new content
they send relevant push notifications
they load at full-screen
they grow more powerful with time, as the user-progressive web app relationship “matures”, so to say
Moreover (and this is no tiny detail, for sure), to the memorable experience that a progressive web app delivers to the end user, add the benefit of a relatively low-complexity development process!
Speaking of which, here are the 5 best tools to use to build a progressive web app:
1. AngularJS, Polymer or React
When you say “web development” you instantly say “JavaScript”, right?
Yet, when you're planning to set up a progressive web app you should be more specific than that: you should “laser-focus” on one of its many tempting frameworks!
In this respect, here are the 3 ones that we recommend you to consider! Select your suitable core framework depending on factors such as your future app's complexity or the time limit that you need to adapt your workflow to:
Angular.JS
Pros:
probably one of the most powerful JavaScript frameworks for building web apps
the environment that its newest version, Angular 4.0, provides is the same for both for mobile and desktop web development
Con:
although there are plenty of tutorials out there that you could use, you might still find this framework to be too complex in case you want to build a progressive web app with just basic features and functionalities
React
By far this framework's most “seducing” feature is its component-approach to web development!
Practically all the components putting together the UI are JavaScript-based, which enables you to easily reuse them at need! A powerful UI development speed-booster tool!
Besides its component-centered approach we could easily point out a couple of other reasons for choosing React to power up your progressive web app with:
giant Facebook supports it (and along with it all its worldwide users, which are constantly testing it, as a global-scale)... need we add more?
it's React Native's foundation, meaning that you'll be able to easily and seamlessly port your React-powered apps to native apps
thanks to the component-based UI, you practically get to deliver your future progressive web app to any browser, device or operating system; using Node.js and Reactive Native, those components can render both in the browser, on the server and inside the apps themselves
Polymer
Now when time is a “merciless” projection of your client, Polymer makes the perfect choice of core framework to build a progressive web app!
It “spoils” you with:
templates
reusable components
… which stand for the perfect definition of a “fast app development process”!
Creating prototypes is, no doubt, the perfect use case for this framework! You can just make use of the template that Polymer provides you with for setting up the code of your app project and add on the client's input later on in the development process!
There's more! Since “fast” is the defining characteristic of this framework, where do you add that Polymer uses PRPL pattern for speeding up the app's delivery to the chosen device?
Should we mention, as well, that the template features the Google-emblematic material design out-of-the-box?
2. Webpack: An Essential Tool to Build a Progressive Web App, a Custom One
If the aforementioned Polymer makes a great choice for getting started, for setting up your apps's prototype, then Webpack gives you access to the next level! The one where you build a progressive web app that's more complex and front-end driven.
Its two major benefits:
it's a module bundler: it enables you to bundle your JavaScript resources (even fonts, CSS, images and other non-code assets), which will get treated as JavaScript objects, meaning that they will load significantly faster
it simplifies the whole creation of dependency graphs (you'll no longer need to display the links to all your JavaScript files on your HTML page)
In short: managing dependencies gets so much more streamlined with Webpack
Con:
along with its speed-enhancing features, Webpack comes with a quite steep learning curve. A manageable one, though, if you consider all the learning resources and documentation available online (that aren't beginner-friendly though, so get ready to invest some resources of time for learning your way around this JavaScript module bundler)!
3. Knockout
If it's a lightweight, yet functionality-loaded, quick to set up progressive web app that you have in mind, then Knockout is the framework to go for!
Here are some of the powerful features that make it an indispensable asset for your toolbox:
it comes with a light library (13 KB), yet carrying a heavy load of functionalities
you get to “inject” its library into an existing website without extensive rewrite
it's easy to learn
it provides you with templating, meaning that building complex apps gets significantly faster (no more duplicated DOM elements)
it works exclusively on JavaScript (making your future app accessible from any browser, any framework)
it's great for handling MVVM bindings between HTML and JavaScript
it enables you to extend your HTML
it comes with a load of pre-built attributes (so you won't need to write them, yourself, like it's the case with other “rivaling” frameworks)
And this is how our suggested “arsenal” of tools to build a progressive web app looks like! Keep in mind, though, that this is an ever-changing list, considering the fast pace at which new web technologies emerge in the digital landscape!
Adrian Ababei / Aug 04'2017
There, there, no need to get yourself stressed out over all the new Javascript libraries trying to lure you with their irresistible features. It's impossible even to test all of them!
Why should you allow this whole array of equally tempting choices to “sabotage” your efficiency by keeping you from creating new amazing websites and innovative web apps?
So, how can you keep your focus? By keeping a close eye on these 10 (lesser known) JavaScript libraries that we're convinced that will gain popularity and become the 10 most influential ones in 2017.
Find out what our predictions rely on!
1. Node.js
A bit sick and tired of hearing everyone in the web community keep talking about Node? No wonder it's one of their main topic:
it's one of those JS libraries that keeps on growing and growing at a mind-blowing speed, no doubt about that
it makes that reliable “boost”, the ideal environment, for any developer to get his web development project started with
it turns local packages management into a “child's play” in the command line
it eases your unit testing (in Mocha.js) work
it puts the Sails.js framework at your disposal for building your front-end interface
2. Riot.js
Now here's another JS library that will be wrapped in glory in 2017! Mostly front-end developers will get all excited around it!
Where will the excitement come from? Its helps you create powerful digital interface libraries!
But what makes it a strong alternative to React, one that you should even consider?
Here are just 3 answers to this legitimate question:
the whole community of developers backing up Riot.js, that you get to rely on, will make getting the answers to your questions much more time-efficient
its simple syntaxh makes it easier for you to control it while you're access DOM
it makes the perfect choice for customizing the elements of your app
3. Keystone.js
We could say that Node.js “passes on the torch” to Keystone.js.
Once you've used all of Node.js' capabilities in your web development process, reach out for Keystone. It will empower your website/web app with a 100% JavaScript, full-scale CMS engine!
4. D3.js
What do you currently rely on for creating eye-pleasing visualizations of your data?
Whatever you're using, you should definitely let D3.js stir your curiosity.
It has no rival among the JavaScript visualization tools. It will help you add the modern edge to your graphs, dynamic visualizations and charts in no time.
Give it a try! Don't let the trends in the big data industry pass you by, be the one who crafts the trends!
5. Create.js
On a constant look for the best toolkit to rely on when you create all your web animations and digital media “awesomeness”?
Well, you should consider Create.js for the role of “assistant” in your work. It's so much more than just “another JavaScript library”: it's a whole collection of libraries in fact. Each one of these “sub-libraries” spoils you with certain features and help you target certain parts of your digital media projects, so that that you should pick the ones that specialize on what you want to achieve in 3D.
For instance, one library/feature will help you build custom animations for the web, while others will help you handle the HTML5 canvas elements. Got the idea?
6. Meteor.js
What's your future web development/web design project? And your second one? How about the third one in your schedule?
Well, learn that you can practically build all these platforms on Meteor! All of them, plus the ones that are still in the phase of ideas populating your imagination!
Being an open source project, it empowers you with unlimited freedom of creation and innovation. From chat apps, to social media platforms, from custom dashboards to social voting website you can build anything from the ground up on Meteor and React.
Unlimited possibilities? Who could say no to that?
It's true though that Meteor is for the skilled web developers, it's not one of the easiest JS libraries to learn! Therefore, expect to have your brain muscle challenged a bit before you get to play with its whole array of great features!
7. Vue.js
Are you in the Angular fans team or in the Ember addicts team?
Now what if I told you that a new “actor” will be stepping on the stage and stealing the spotlight: Vue.js?
For front-end developers it will be more than just “lucky no. 3”. It's a MVVM front-end framework and it's Javacript (how else!)! Therefore, it steps away from the standard MCV architecture.
Although learning it might turn out to be quite a challenge, don't let that discourage you: this is going to be the two typical front-end frameworks' (Amber and Ember) big “rival” in 2017, so you'd better be one step ahead of trends and start learning it now!
8. WebVR
How's your VR projects coming along?
JavaScript comes to streamline your workflow with its' new API made for VR in your browser.
It's still under testing (and being an open source you can just imagine the “army” of developers testing all its weaknesses, checking how it works on VR devices and in the latest browsers), but even so, dare and rely on our prediction: you want to keep an eye on it in 2017!
9. Chart.js
Name a type of chart that you need to integrate in your website/web app and we'll tell you that you can easily put it together with Chart.js.
Besides the cool data graphs that you can build, we've put this Javascript library on our list due to its other tempting features:
it's so easy to customize
it's easy peasy to set it up, too
it comes already upgraded with great options for animations
it's an open source, meaning that you gain access to helpful documentation, too!
10. Three.js
And here's a more than useful JavaScript resource whenever you feel the urge to pull off some:
unbelievably realistic motion-sensitive backgrounds
mind-blowing 3D effects
amazing 3D web graphics
Don't you look forward to 2017 now, knowing what cool JavaScript libraries will get perfected and ready to help you enhance your full potential as a developer?
Adrian Ababei / Nov 24'2016
Since jQuery’s initial release more than eight years ago, it has grown in popularity among web developers and clients alike – nowadays jQuery is considered to be the foundation of the modern Web. In these past eight years the cross platform library was bundled with countless developer tools, sites and of course, with JavaScript. Now it’s time for jQuery 3.0.
jQuery 3.0 is released
jQuery 3.0 was just released – this version of jQuery has been in planning since October 2014. jQuery 3.0 is a much faster, slimmer version of the old one with great attention given to compatibility. All the old IE workarounds have been removed and more powerful modern API’s were implemented.
Upgrading to jQuery 3.0 is easy
Upgrading to 3.0 is relatively easy and jQuery even released a neat little guide which you can follow. Not only that but with the use of jQuery’s Migrate 3.0 plugin you’ll be able to see any compatibility issues in your project or code.
The new jQuery 3.0 is slim
In the future you won’t really have to use AJAX, you’ll simply be able to use a standalone library that focuses on AJAX requests or a combination of class manipulation and CSS for web animations. The 3.0 version also features a slim version which removes all AJAX and effects modules – this version also excludes any deprecated code. Web developers are of course able to include or exclude any modules they want, thanks to the custom build API used by jQuery 3.0.
Since it’s a very fresh release, there are a few necessary tweaks which will be made in the following months – jQuery Mobile and UI currently have some issues.
Changes and features in 3.0
IE workarounds are removed
The old workarounds and hacks for IE9 got removed in order to make jQuery 3.0 sleeker and faster. If you still need support for IE 8 you’ll just have to use the 1.12 release because versions such as 2.0 don’t offer full support for older versions of Internet Explorer.
jQuery 3.0 runs in strict mode
Since most browsers supported by jQuery 3 also support strict mode the new release has been built with it in mind. Your personal code is not actually required to run in strict mode and you don’t need to rewrite your existing code if you want to migrate to version 3.0. Strict mode can work with non strict mode and vice-versa – the only exception is related to some versions of ASP.NET.
A new API for animations
The request AnimationFrame() API is now used for animations, thus making them much faster and smoother. jQuery 3.0’s new API is only used with browsers that fully support it – other browsers such as IE9 will use the older API in order to display animations.
Escaping strings with special meaning got easier
The jQuery.escapeSelector() method allows web developers to escape characters or string that have a different meaning in CSS in order to use them in a jQuery-selector. Example:
„If an element on that page has an id of „abc.def”, it cannot be selected with $(„#abc.def” ) because the selector is prased as „an element with id ‚abc’ that also has a class ‚def’. However, it can be selected with $(„#” + $.escapeSelector( „abc.def”) ).”
Class manipulation supports SVG
Although jQuery 3.0 doesn’t fully support SVG, the methods that manipulate CSS class names such as .hasClass() and .addClass() can be used for SVG documents. Web developers are now able to find and modify classes with jQuery in SVG then style these classes with CSS.
Deferred objects are also compatible with JS promises
JavaScript Promises are a special type of objects usually used for asynchronous computations – these have been standard in ECMAScript 6 and their features and behaviours are specified in the Promises/A+ standards.
In the new version of jQuery deferred objects are compatible with the Promises/A+ standards. Deferreds are also chainable objects, which means it’s possible to create callback queues.
With the new release of jQuery the asynchronous callback functions executions are changed – Promises allow web developers to write asynchronous code that is more similar in logic to synchronous code.
Adrian Ababei / Mar 11'2016
Web development experts tend to debate a lot when it comes to Javascript vs jQuery. There is really no correct answer in this situation simply because either of them can be used to create approximately the same effects or results - it’s contextual.
Generally speaking, jQuery should be enough for your average web development project but in certain cases JavaScript may be necessary to successfully complete it. As a rule of thumb, every web developer should learn both jQuery and JavaScript so let’s get down to the details:
Javascript
Javascript is a web programming language that’s oriented on objects. The programming language is usually used to introduce certain functionality into web pages. The Javascript code is automatically loaded by the browser. Javascript is very similar to C when it comes to syntax – it’s very popular among programmers because you can create scripts for multiple activities such as adding effects or creating menus on certain page elements.
Asynchronous Javascript and XML, also known as AJAX is becoming more and more popular in the programming world. With this technique, HTTP requests are made in the background, without needing to reload the page – changes to certain sections of the page are done in real time. When using AJAX, programmers can create interfaces with limited response time simply because the time for reloading a HTML page is removed.
jQuery
jQuery was released back in 2006 as a library build with Javascript – jQuery helps web developers load dynamic content onto pages, handle events, manipulate CSS and animate certain page elements. If you’re using jQuery you won’t have to worry about how browsers interpret the code. jQuery is a very useful Javascript library that reduces vague code and collects functions which in turn increases your programming workflow.
jQuery 1.x is supported by Internet Explorer 6 or higher and all browsers in general. With jQuery 2.x, the support for IE 6-8 was dropped but instead jQuery supports Internet Explorer 9 or higher.
The jQuery user interface is a collection of GUI Widgets, visual effects and themes created using jQuery, HTML and CSS.
jQuery UI effects include:
Add Class, Toggle Class, Remove Class, Switch Class
Color Animation
Effect
Hide, Show
Toggle
jQuery UI Widgets include:
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Progressbar
Selectmenu
Slider
Spinner
Tabs
Tooltip
jQuery UI utilities include:
Position
Widget Factory
Javascript code:
function backgroundChange(color) {
document.body.style.background = color;
}
Onload=” backgroundChange(‘blue’);
Where as in jQuery the code is much simpler and clean:
$(‘body’).css(‘background’,’blue’);
Javascript vs jQuery – Which one to use?
For most web development projects jQuery will suit your needs just fine but as stated before, learning both Javascript and jQuery can be an asset. Keep in mind that one of the biggest differences between Javascript and jQuery is the fact that jQuery can work with many browsers automatically while JavaScript has cross browser compatibility issues due to poor implementation practices.
Adrian Ababei / Mar 03'2016