Categories
Tips

Five frontend books you should read in 2021

What skills are you planning to learn as a frontend developer this year? Our friends at Packt have shared five frontend books you should read in 2021. 

React and React Native

A complete hands-on guide to modern web and mobile development with React.js

What reviews say:

“I have books in my library older than most of the people I work with, maybe 200+ at this point and I would put this among the top 10 for content. Great book if you’re looking to get into React and/or React Native and the follow-along code samples actually work – big kudos!”

Svelte 3 Up and Running

A fast-paced introductory guide to building high-performance web applications with SvelteJS.

What reviews say:

“This is not just a book about Svelte. Sure, you do build an app using Svelte 3, and while building it the author gradually (and with clear examples and explanations) introduces the concepts and syntax of the Svelte framework.

However, what I enjoyed the most about this book was how it was a practical guide for building static web apps. You’ll start with some overview of why static web apps (or JAMstack apps) are powerful, and then you get on to building. From setting up VS Code, all the way to production… and even with automated testing and DevOps!”

Learning Angular, Third Edition

A no-nonsense beginner’s guide to building web applications with Angular 10 and TypeScript.

What reviews say:

“This book is typically useful for any front-end or full-stack software engineer who is completely new to the web development or has some JavaScript web development experiences but wishes to jump into the Angular world playing with the typescript.”

Modern Web Testing with TestCafe

Get to grips with end-to-end web testing with TestCafe and JavaScript.

What reviews say:

“This is a very good book for

– Beginners who are looking for step by step clear instructions to use TestCafe right from setting up the environment all the way to writing expert level e2e automated tests

Current TestCafe users to learn TestCafe internals and best practices.

The other aspect I like about this book is, it also provides compares between Selenium and TestCafe. This is very helpful for current Selenium users trying to switch to TestCafe and best use the benefits TestCafe provides.”

Vue.js 3 Cookbook

Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript.

What reviews say:

“This book is a good introduction to Vue.js 3.0 and the main features which vue.js contains. The book contains a lot of examples, which gives you a good overview of the different possibilities that you have when working with vue.

For example, it discusses about vue files, plugins, vuex store, mixins, decorators, props, slots, vuelidate, and vue router, among others.”

Have you read any of these books already? Do you have other titles that you’d recommend? Share your thoughts in the comments.  Looking for more inspiration? Here are more book recommendations.

Be a guest writer on our blog
Have you got brilliant tips and resources that developers love to read? Then we want you on our blog! Find out more.

Categories
Platforms

Angular vs React: Battle for the future of front-end web development?

Google and Facebook are two of the world’s most powerful companies and each has created a framework for building web apps. Angular and React respectively appear to be in a battle for the future of the web, with the active online debate and adoption for large consumer-facing apps seeming to lean quite strongly in React’s favour at present. Are they collectively taking over the front-end? Is React really leading? Our data from a broad cross-section of nearly 6,000 web developers may surprise you.

angular vs react

Which is your favourite framework? Take the Developer Economics Survey and win amazing prizes.

Although traditional, largely static, web pages still have an important place, mobile is now the dominant computing paradigm and mobile users have come to expect the interactivity of native apps. To attempt to match a native app experience, a web app cannot be entirely rendered on the server side, the page has to be changed dynamically on the client. The more extensive the changes the greater the need for a better abstraction than the DOM (Document Object Model) to manage the complexity. This has driven ever growing usage of third-party JavaScript libraries and frameworks.

Historically jQuery was the first library to get really popular, enabling easier manipulation of the DOM on the client side. It’s still the most popular today, as the primary front-end library for 34% of web developers. However, manually manipulating the DOM turns out to be extremely complex and error-prone when it’s happening extensively, so frameworks that provide a better abstraction are increasingly important. Overall just 12% of web developers don’t use any kind of framework and another 6% have written their own. That leaves 48% of web developers currently using a third-party framework other than jQuery as their primary way of doing front-end web development. Of those, Angular and React account for 30% of all usage, leaving all the others far behind. Indeed front-end web development is such a fragmented space that no other single library or framework accounts for more than 2% of primary usage. So React and Angular certainly lead other frameworks, although only around half of all web developers have fully embraced any single page application framework so far.

Angular is still king despite the React hype.

AngularJS (Angular 1.x) was the first single page app framework to get the stamp of approval from an internet giant, when Google started to back the open-source side project of one of their employees publicly. Google’s backing gave many large enterprises the confidence to adopt, and with broader adoption came a flourishing ecosystem of components and tools. As this was happening, React was built internally at Facebook and deployed on the Facebook newsfeed in 2011 and then Instagram’s web app in 2012. Yet React wasn’t released as open source until 2013, by which time Angular had an enormous lead in both adoption and ecosystem. Then in late 2014 Google appeared to stumble previewing Angular 2.0, which was going to be incompatible with Angular 1.x and use a new language. Reaction from the developer community was not good. By mid-2015 Google had agreed to work with Microsoft so that TypeScript became the official language for Angular 2.0, while the 1.x series had a promise of continued support, and a migration path between versions was created. This discontinuity for the Angular community seemed like a gift to the already rapidly growing React.

Although Angular still had many vocal fans, anyone following the broader front-end web developer community online would have to assume that React was taking Angular’s crown. At the time of writing React has passed Angular 1.x in terms of stars on their respective GitHub projects, with around 61,500 to 55,000. Angular 2.x trails both of these by far with 21,500. In the independent State of JavaScript survey run in late 2016, React came out way ahead of both versions of Angular in usage, interest, and retention. However, our own survey, which reaches out across many different developer communities does not reflect this result overall at all. Not only is Angular 2.x the primary framework for about as many developers as React (10% vs 9% globally), but Angular 1.x is still the most popular overall by a slim margin (11% use it as their primary framework). In total those using one or the other version of Angular number more than double those using React.

angular vs react

React is favoured by front-end specialists.

In order to see how reality in the market could be so different from the online buzz and even a large community survey, it’s interesting to look at the breakdown of JavaScript library and framework usage by primary programming language. If we only look at the users of the latest versions of JavaScript – those who like to stay at the forefront and are more likely to be found debating framework choices on the internet – we see React is the primary framework for 27% of them. So amongst those who have made the switch to ESNext (i.e. the 2015 version of the JavaScript standard or later), who then use tools to convert their code to the JavaScript that’s widely supported in browsers (known as ES5, introduced back in 2009), more are using React than both versions of Angular combined. However, this is the only group of developers for which React beats either version of Angular alone. These forward-looking JavaScript users are less than half of those primarily using JavaScript, and just 16% of all web developers (who almost all use some JavaScript).

A further 18% of web developers are still primarily using ES5. More of these are currently still using Angular 1.x (21%) as their primary framework than Angular 2.x (9%) and React (8%) combined. These developers are getting on with what they know and are productive doing. They may be following the new standards and frameworks but most of them don’t see enough benefit in switching yet. Another 3% of all web developers are primarily using TypeScript, which could be seen as the most advanced version of JavaScript currently available. However, some web developers understandably don’t want to adopt anything not yet in the standards, others don’t want to use the optional static types, and a significant minority still avoid anything from Microsoft. Given that Angular 2.x has adopted TypeScript it’s not surprising to find 41% of those primarily using the language have adopted the framework. There are another 18% currently still using Angular 1.x that will most likely migrate to Angular 2.x.

Backend web developers prefer Angular on the front-end.

After some flavour of JavaScript, the most popular language for web developers is PHP, with 21% still considering it their primary language. Given the focus on rendering pages server-side in most of the popular PHP content management systems, it’s not too surprising to find less interest in single page app frameworks in general amongst these developers, with 52% still using jQuery as their primary library. Interestingly only 3% of PHP developers are primarily using Angular 1.x, with 8% on Angular 2.x, and just 4% for React. In fact almost as many PHP developers don’t use any library or framework for the front-end (14%) as use React plus either Angular version.

Developers primarily using server-side languages other than JavaScript/Node.js or PHP (totalling 42% of all web developers) are significantly less likely to be using jQuery than PHP developers but they are also significantly less interested in Angular and React than the JavaScript developers (26% vs 38%). When they do primarily use one of these front-end frameworks, far more choose Angular (20%) than React (6%), and more of the Angular users are on version 2.x (11%) than version 1.x (9%). Considering all of those who are server-side developers not using Node.js, which is 63% of the web developer population, Angular is significantly preferred to React at this point, probably because it is complete framework, rather than forcing the developer to make lots of other library and tooling choices as they currently have to with React.

What happens next?

There are a many alternative futures that could be inferred from this data. The simplest story would be that framework preferences won’t move much for the different groups. Server-side developers will continue to have relatively little interest in the front-end frameworks and ES5 developers will stick to Angular 1.x when they eventually transition to ESNext or TypeScript. This doesn’t fit the current trend of increased JavaScript usage across the web, front-end and server. It also ignores the fact that Google will be migrating to Angular 2.x internally and developers will not want to be left without support one day. We could also imagine that as developers start using ESNext or TypeScript their framework preferences shift accordingly. Both React and Angular gain greater share, with React growing faster than Angular.

There’s probably some truth in this, but it’s too focused on the front-end developers. Server-side developers who aren’t using Node.js are less likely to find React attractive without a much simpler learning curve for the ecosystem. Then again, the most popular PHP framework is still WordPress, and the company behind WordPress has chosen React as the new front-end framework for WordPress.com – many PHP developers may follow them. Facebook has significant momentum with React, but Angular is likely to remain the most popular for smaller projects and internal apps. What we can predict is that despite the inevitable churn on the front-end, both frameworks have successfully built a critical mass of developers creating valuable ecosystems, and both are set for significant growth in the years ahead. We’d be surprised if the 30% of web developers using either Angular or React didn’t become 40% in the next 2 years.

So, what do you prefer? Angular or React? Take the Developer Economics Survey and win amazing prizes.

Categories
News and Resources

Angular team announces final release of version 2.0

Welcome to DeveloperEconomics’ weekly news roundup. In this edition, Google announces the release of Android Studio 2.2, Oracle confirms rumours of a Java EE 8 delay and Microsoft has been crowned the new king when it comes to open source contributors. Read on for the full news rundown.

Google app ads beat Facebook with 3 billion installs

Google says its ad products are now responsible for more than three billion app install ads. The announcement follows Facebook’s claim in April that its ads have generated over two billion installs. Google says it’s also experiencing a decline in average ad prices, down 9% year-on-year, due to the continuing growth of YouTube ads.

Microsoft has most open source contributors, says GitHub

Microsoft has beat Facebook to become the organisation with the most open source contributors on GitHub. Microsoft racked-up 16,419 contributors, beating Facebook’s 15,682 and Docker’s 14,059. GitHub’s report also found that JavaScript is the most popular language, Font Awesome is the repository with the most open source contributors and Homebrew is the repository with the most users reviewing code.

Java EE 8 not ready until end of 2017

Oracle says the release of Java EE 8 will be delayed until the end of next year. The delay, which was rumoured for some time, was announced at the JavaOne conference last week, where a new roadmap was proposed. Oracle now plans to release Java EE 8 with basic microservice and cloud capabilities, before releasing EE 9 sometime in 2018 with more features.

Affectiva emotional analytics platform now free for indie devs

Start-up Affectiva is allowing any company that earns less than a million dollars a year to use its SDK and API. The Affectiva platform uses “emotional analytics” to analyse user sentiment via chatbots or surveys. The company also announced a partnership with Giphy, which will see Affectiva encode Giphy gifs for sentiment analysis.

Angular team announces final release of version 2.0

The Angular team has announced the final release version of Angular 2.0. The new version of the JavaScript framework features better support for modern browsers, modular functionality that makes it easier to use third-party libraries, and is recommended for use with Microsoft’s TypeScript. Google also says it will provide devs with more guides to learn Angular 2.0 faster.

Android Studio 2.2 released

Android Studio 2.2 is now available to download. The update brings a significant number of new features, including an improved layout editor, an activity recorder that generates Espresso code for automated testing, and an emulator that can simulate data from different sensors. The new IDE also boasts an APK analyser, GPU debugger and much more.

GitHub announces project management tools and support for formal reviews

GitHub has announced the “biggest update yet” to its platform, bringing project management features to the table. The built in Trello-like project management tool lets users move cards with pull requests and switch cards between columns such as “in progress” and “done.” GitHub also now lets devs formally approve all pull requests and leave review summaries.

Kochava releases free version of app analytics tool

Kochava has launched Free App Analytics, a tool to measure and optimise app ad campaigns. The free tool lets devs optimise campaigns across big networks such as Facebook, Google, Amazon, Twitter and Snapchat. The tool also includes a global index of integrated ad networks. However, features such as scaling are only available in Kochava’s paid Enterprise offering.

Microsoft opens Desktop Bridge for Win32 app conversion

Microsoft’s Destktop Bridge is now ready to use, allowing devs to repackage desktop apps, including Win32 apps, for the Window Store. The Desktop Bridge also converts apps to the Universal Windows Platform, allowing Win32 apps to run on any device running Windows 10. Microsoft says the bridge has already been used by the likes of Evernote, Arduino IDE and doubleTwist to bring full featured apps to Windows Store.

Oracle announces ‘drag and drop’ chatbot platform

Oracle has unveiled a new platform for building and running chatbots. The tool doesn’t require any coding experience – featuring a drag and drop graphical interface – and is positioned an easy-to-use bot builder for enterprises. According to Oracle, its bots will work with all modern messaging platforms, such as Facebook, Slack and Kik.

Google acquires API.AI bot building start-up

Google has bought API.AI, a start-up that provides dev tools for building conversational bots. According to Google, over 60,000 developers are using API.AI’s tools to build conversational experiences for environments such as Slack, Facebook Messenger and Kiki. The terms of the acquisition have not been disclosed.

Categories
Tools

Comparison of 4 popular JavaScript MV* frameworks (part 2)

In the first part of our JavaScript MV* framework comparison we introduced AngularJS, Ember, Backbone.js and the newcomer React, we showed some code examples and discussed their strengths and weaknesses. In this second part we are going to have a look at their market share, community support and estimated growth to help you make the right decision for your SPA.

Javascript frameworks

Market Study

The following table lists the 4 frameworks alongside the year they were introduced, their origin or enduring dependency, their main contributors and an overview of popular sites using them. It’s worth noting that every single one of these frameworks is run by (or mainly used by) one of the big players of the web:

  • Ember is used by Yahoo!
  • Angular powered by Google
  • Backbone is used to realise WordPress.com and is a part time project of Jeremy Ashkenas, currently employed by the New York Times
  • React is introduced and powered by Facebook

While the bare listing clearly illustrates project maturity it does not give any indication about general popularity. Stats generated by web crawlers are usually not very accurate when it comes to back-end frameworks, but in our case – where frameworks are client-side and, needless to say, detected by every web client – those stats can be pretty sound.

Comparing wappalyzer.com with similartech.com and builtwith.com we received significantly different results. To display the results in a more convenient way we recalculated the total numbers to relative percentages. According to builtwith.com, React is used 74 times in the TOP 1 million websites while wappalyzer.com detected 18.582 usages in the entire web for the same framework as of this date. Still, it is possible to get a general idea of the market penetration of these Frameworks. All sources show Angular and Backbone being by far the most used frameworks – similartech.com does not even list the other two since their marketshare is too small to bother. Interesting to note that Backbone.js is used more in the Top 1K sites than in the Top 1M sites according to builtwith.com.

For you as a developer it might be more interesting to have a look at the community built around each Framework as it might reflect the amount and speed of support you will find for your upcoming projects. Therefore it is always a good idea to have a brief look at the few occasions where the community activity is shown. Since every project here is listed on GitHub a brief extraction of their stats should be helpful.

Angular was the winner of our part-1 comparison. It’s no surprise to see Angular again as one of the two most popular frameworks. While it almost reaches Backbone’s popularity it surpasses all competitors from the developer community site: Most stars, most contributors, most watchers, most issues (judge yourself if that’s good news), and a large amount of commits. When it comes to this kind of stats the number of git commits since the initial deployment plays a huge role: Ember, for instance, has the most commits. Impressive! But keep in mind: Ember had six more years to collect these commits compared to React. Taking things into perspective, React has more stars (already) than Ember although it is barely out of its childhood compared to the other almost ancient players.

Despite not being visualised here Stackoverflow.com displays Angular in the best possible light as it counts more than the double amount of posts than Backbone and Ember together and over 65 times more than React!

We do realise this is a snapshot in time and might well be outdated by the time you read this post. Which leads to the following question: Which of those frameworks is worth investing in the (near) future? The question is especially relevant for React as its popular contributor Facebook is well-known for the ability to establish new technologies, be it software (Hadoop) or hardware (open compute). Are we close to witness a new star rising on the MV* Framework horizon?

Google Trends has always been a faithful companion to get an idea of how popular a topic is and, by looking at the development over time, how popular it might be in the future. While different search terms around the same topic might bring different results, you can still get a general idea for each framework. The fact that these terms appear around the same time the frameworks were introduced proves our point as being representative, at least to some extent.

What this graph for sure does is manifesting Angular as the most popular Framework. Moreover, fascinating to note, Backbone’s popularity seems to be stabilized or even decreasing over time. Same can be said by looking at Ember. Are they already over their peak and now losing momentum? While Backbone’s market penetration might already be too deep to just disappear from the market, fate seems uncertain for Ember.

No doubt, the most astonishing trend is React’s. While writing this blogpost, we had to rewrite this section three times in two months:

December 2014: Backbone and Ember are closely followed by React. =>Respect!
January 2015: React catching up and passing by its competitors. => Impressive!
February 2015 (partial data!): React’s popularity outruns Backbone and Ember by far and is the runner-up to Angular. => Speechless!

According to Google Trends, React has risen from zero to a fourth of Angulars popularity within 1.5 years without showing any kind of flattening of their popularity curve. If React keeps up its progress we might see a new rival of the popular Angular at least as far as the View component of the MV* frameworks is concerned.

Categories
Languages Platforms Tools

Comparison of 4 popular JavaScript MV* frameworks (part 1)

Finding a comprehensive comparison between any kind of JavaScript Frameworks, Libraries or Extensions is not hard these days. Especially when it comes to JavaScript MV* Frameworks, which are used to develop single-page applications (SPAs), and their notorious representatives, i.e. AngularJS, Ember, Backbone.js and newcomer React. A simple Google Search offers a plethora of technical comparisons to choose from.

mv-frameworks

Which are your favorite and worst frameworks? Take the survey, let us know and you can win awesome prizes and gear.

What they don’t usually mention, though, is the overall features those frameworks provide and how they compete for different use cases. Moreover, it is sometimes difficult, if not impossible, to find information on the origins of those Frameworks, i.e. how they have developed in time and, most importantly, how they will develop in the future.

This article is part 1 in a 2-part series, and will focus on comparing key features from some of the leading JavaScript MV*frameworks. In part 2, we’ll give you some insight on market-related qualities, followed by a conclusion.

Features Comparison

To get our comparison started, we will focus on the heavy-weight and most promising features you, as a developer, expect from a JavaScript MV* Framework.

Dynamic UI Binding

Dynamic UI Binding is not just passing data to our View or template at page load. You want to automatically have the View update when the data of the underlying Model changes. That being said, you may want to have a look at the following jsfiddle examples to get an idea of the huge improvement provided by dynamic UI binding over traditional server-side static data binding.

Ember.js:

Ember uses Handlebars as the default templating engine. To update a value, which is bound to the UI, you have to use a specific setter method on your Model while Handlebars takes care of rendering your page. Additionally, Ember offers much more binding options, such as its capability to have your Model in either a one or a two-way binding mode between a View or even another Model.

Angular.js:

In contrast with Ember’s approach, Angular.js allows you to use UI binding at plain object or even property level. At the end of every code execution, $scope.$apply() is run to check whether the value has changed and calls $scope.digest() to update your bindings. This may seem like a possible performance issue at first glance, but bear in mind that it allows you to update more than one binding simultaneously without requiring time-consuming DOM updates after each setter call. So the DOM rendering is triggered only once after you updated as many of the Model’s properties as you wish rather than being triggered after every single value change, like in Ember’s setter approach. Having all the magic happen in $scope.$digest() you don’t need to call your UI-Binding-Buddy yourself and even the $scope.apply() call is handled by Angular automatically (e.g. after events, controller init, http callback, etc).

React:

One of React’s rich UI Features is the straightforward linking of states directly to the UI. Since the UI is thought of as the representation of different states of a React Component, you just have to manage your states with the magical #setState(state, callback) method. The state parameter is passed as an object and will be merged into the internal state reference of your React Component. Meanwhile, React takes care of all the updating and re-rendering of your interface using the render method. The callback parameter from setState is optional and can be registered so you are informed after the UI update.

Reusable Components

While all frameworks provide out-of-the-box functionality, you will inevitably end up with a lot of custom code. Assuming you are developing more than one applications, you would like to be able to reuse that code, right?

Ember.js:
Ember is making use of a widget-based approach called Ember Components. It enables you to write your own ‘application-specific HTML tags’ using a Handlebars layout and the power of Ember’s backend infrastructure. Your custom element can be used in any Handlebars template you want. Keep in mind, though, that this is only possible at View level, while Controller level reuse is not supported by the Framework.

Angular.js:
Similar to Ember, Angular.js provides the ability to create custom HTML tags. Reusable components in Angular are called “directives” and are significantly more powerful than Ember Components. In fact, you will be able to create your own semantic and reusable HTML syntax using those directives. On the other hand, you may also make use of Angular’s extend or mixin system like in Backbone.js and React.

Backbone.js and React:
The way Backbone.js and React solve reusable components is not new, yet it is very reliable. They both use the mixin system for code reuse. You may know this feature already from the dojo toolkit and might remember how powerful mixins can be. Both Backbone and React let you use mixins at view or even controller level, so that your components are not forced to be UI-related and may contain just some utilities or even complex program logic.

Routing

The simplest routing infrastructure a MV* JavaScript Framework can offer is mapping functions to URLs, similar to their server-side relatives (e.g. Grails, Spring, ASP.NET, CodeIgniter). For Single Page Applications (SPAs) a URL is whatever follows the hashtag (or might even be full path assuming HTML5 push-state is enabled). This routing functionality is essential for any self-respecting SPA.

Ember.js:

The routing in Ember.js is quite intuitive, since you do not even need to provide a path for your route, as long as you follow the naming convention. You just provide the View and an optional Model to the route and there is no need for any kind of controller (as exhibited in the Fiddle above), unless you are planning to do some advanced stuff in your application.

Angular.js:

In contrast to Ember’s convention-over-configuration routing mechanism, Angular.js requires a template and even a controller to its router configuration. You have to manage your template and controller manually – but you can do that almost without restrictions.

Backbone.js:

Similar to Angular.js you provide a View with a Template for your route. The actual replacement of the DOM is done manually by instantiating the View and updating the DOM in your container node with the rendered view template. At the end of your routing configuration you just have to tell Backbone to listen for URL changes with the command Backbone.history.start().

Pit Stop – Concluding the Feature Comparison

It is quite unfair to compare React with the likes of Ember, Backbone and Angular. First and foremost, React is new, while the latter are already established frameworks in the MV* universe. Secondly, React is not a framework, but rather a View engine – even though it competes extremely well in terms of features. In fact Facebook explains it better: “React is mostly used as the V in MVC”.

Let’s look again at our JavaScript MV* candidates.

Backbone doesn’t provide UI binding and does a really good job at reusable, components but loses some of its fanciness when it comes to Routing. Ember offers a slick routing mechanism, keeping things clean and simple by introducing naming conventions. Its UI Binding concept and use of Handlebars, which provides you with very nice benefits, is flawless. The only thing Ember lacks is the reuse of components at Controller level.

To conclude, Angular is our winner – so far. The approach of extending HTML with custom syntax, the easy-to-use data binding features combined with the power of mixins or extends and a clear routing mechanism makes Angular more than just a swiss JS-Knife. With its high abstraction level and a bunch of features it may be the choice for a full featured CRUD application – client sided.

Stay tuned to find out more about how our rivals compete in market penetration, community support, their estimated future usage and, of course, our final conclusion to help you back the right horse for your SPA.

 

In the meantime, tell us more about what you love or hate for each framework and you might win cool gear. Take the Developer Economics Survey.