Tag: front-end

Categories
Community Tips

The Future of Front-End Development: Don’t Get Left Behind

Front-end development is really the closest coding gets to connecting directly with users. Every choice you make impacts the experiences people have with websites and mobile apps. This makes your skills and creative perspectives as a developer extremely valuable to organizations that need online resources. Which, let’s face it, is pretty much every organization today.

That said, the digital landscape is constantly changing. To keep being successful as a developer, you need to have a good understanding of what the future of front-end is likely to be and how you can navigate it. Let’s dive a little deeper into this issue.

In-Demand Features and Tech

As a front-end developer, one of the keys to not getting left behind is to embrace the technology and features that clients are prioritizing. This isn’t just the elements that are popular now, but also those that are likely to demand in the foreseeable future. Nobody’s expecting you to be both the master of all skills and a technological Nostradamus all rolled into one. Nevertheless, there are a few areas of front-end dev it’s worth keeping on top of.

Chatbots

Businesses are increasingly considering chatbots to be a front-line customer service and informational tool. It is, therefore, important to be adept in making conversational platforms that are relevant to specific clients’ individual needs and integrating these into websites. There are various platforms to help with this, including DialogFlow, which uses Google’s natural language processing (NLP) tools to support voice and text-based conversations.

Offline accessibility

Businesses naturally want their consumers to be able to engage with their web resources or apps easily and conveniently. Unfortunately, low network connectivity and dropped signals can disrupt this. One of the solutions is establishing offline accessibility. This is why it’s important to know how to implement effective caching, data storage, and information retrieval procedures. They let users interact with resources to some extent until connections have been restored.

Autocoding

Artificial intelligence (AI) driven coding tools can’t replace the creativity of developers. Nevertheless, it’s worth considering that autocoding platforms can be tools for efficient development. Starting to identify where to strategically automate some aspects of coding can streamline processes. On one hand, this gives you space to dedicate your attention to creative and problem-solving aspects. On the other, it makes you a more agile contributor for clients whose needs can change quickly.

Developing Collaboratively

As a front-end developer, it can certainly feel as though you’re operating pretty independently. Nevertheless, there are ways you collaborate on projects. This can be with clients or back-end developers, among others. These collaborations are likely to continue being important in the foreseeable future. To be left behind, you need to stay on top of how the nature of collaboration is likely to change.

Some of the aspects to be aware of include:

  • Collaborating remotely: One of the great advantages of the digital landscape is that companies have access to talented contributors across the world. This means that collaborating remotely, potentially between different time zones is likely to be key to your future in front-end development. Start getting familiar with tools that make these easier, like project management platforms and digital whiteboards for asynchronous ideation.
  • Collaborating in the metaverse: Virtual spaces are looking increasingly likely to be the future of online interactions. Therefore, you’ll need to start exploring not just how to develop for the metaverse, but also how to meaningfully collaborate with others within it. It’s wise to start testing out platforms for ideation meetings and perhaps even prototyping. Importantly, learn how to maintain the security of the data and ideas you’re sharing with others in these spaces. 

Additionally, no matter how you approach your collaboration, communicating your plans and ideas will always be vital to success. After all, there are various stakeholders connected to your front-end development and your actions in any project can impact those of other people. Mistakes here can cause conflict and may affect clients’ and other collaborators’ buy-in to your ideas.

Therefore, you need to adopt effective strategic plan communication measures. These include taking the time to suggest regular all-hands meetings that allow everyone to stay informed about the details of the project and feel meaningfully involved. You can also provide greater clarity on the goals and details of the development project with engaging visuals rather than just text explanations.

Maintaining Your Abilities

Not getting left behind in the future of front-end also means understanding that you need to pay attention to how effectively you’re functioning. There are likely to be challenges ahead that you’ll need to navigate. As a result, paying some attention to maintaining your ability to be a technical and creative contributor is essential. This isn’t just good for your professional efficacy, but also for continuing to enjoy what you’re doing.

Start by committing to seeking out opportunities to upskill. Even if you’ve already achieved a high level of development aptitude, there are always areas for improvement and diversification. Importantly, research into in-demand features and tools can give you the data to target the most relevant abilities. Perhaps above all else, be open to following your curiosity.

Another key to maintaining your abilities is to be aware of potential health risks associated with your work and mitigate them. For instance, computer vision syndrome (CVS) is an eye condition that can arise from prolonged screen time. This is due to strain from repetitive eye movements, closeness of screens, and even exposure to blue light. Be mindful of symptoms of such conditions, like regular headaches or light sensitivity. Importantly, take preventative steps by scheduling regular screen breaks and optimizing your computer setup.

Conclusion

Understanding the future of front-end development can help you more effectively prepare for it. This can include getting to know the likely in-demand features and tools, alongside best practices for working collaboratively as the landscape changes. Nevertheless, it’s important to understand that you can’t guarantee what the future will hold. Stay on top of industry news and have conversations with your professional network. This can help you to catch the early signs of changes so you can adapt in good time.

Categories
Tips

Five frontend books you should read in 2021

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
Tips

Professional Front-end Developer Guide to the development triangle

Professional Front-end Developer Guide to the development triangle

If you’re interested in dabbing your toes in the front-end development, this post if for you. Our community is rich with developers covering all major areas of development, so we reached out to one of our loyal members to share a few front-line tips with you via this mini professional front-end developer guide!

Dominic Myers is a professional front-end developer with a wealth of experience. He spends most of his day being fascinated by, developing and implementing the newest trends in web development, primarily HTML, CSS and JavaScript, or whatever will get the job done. Here he shares his professional front-end developer guide to the front-end development triangle.

A Professional Front-end Developer Guide

I’ve spent the past couple of years writing, editing (and editing some more) a book about front-end development (which you can purchase here or here), which is finally making it’s slow and ponderous way into the light. That use of words suggests that it’s a vast and weighty tome of a book – and it certainly was when I first submitted it – but after all that editing, it’s finally down to a fighting weight, and I think it’s a better book for that. One thing I was keen to point out is the triangle of technologies we, as front-end developers, need to be conversant. In much the same way that fire isn’t possible without fuel, heat and oxygen, front-end development is impossible without a more than cursory knowledge of HTML, CSS and JavaScript (JS). 

HTML

In the dim and distant past, when attending the introductory lecture for a conversion Computer Science MSc, I didn’t understand why the rest of the students sniggered when someone answered HTML when asked if we had any experience of programming. Once the chuckling had subsided sufficiently, the lecturer was keen to point out that while HTML was not a programming language, with its lack of all those things recognisable as being associated with programming languages such as variables and functions it couldn’t be; it was still a language – be it a markup language. As such, it involves a certain level of abstraction. 

The writer of HTML needs to have an appreciation of the milieu in which it will reside: the browser. Browsers themselves are unusual beasts with all sorts of wild and weird characteristics. The same browser might act differently on different architectures, or in identical hardware but with varying levels of user privileges, or with plugins installed. The unfortunate HTML author might even have to deal with superseded versions of browsers (Yes, IE11, I’m looking at you! I spend a significant amount of time massaging ES6 into ES6 for IE11, most often by hand but sometimes with Babel – but even Babel has its limits).

Along with the vagaries of the browser, an appreciation of what the browser will do with HTML is necessary. It isn’t merely rendered line by line to the user interface; instead, it is converted to Document Object Model (DOM). I like to think of the DOM as something like a tree with a trunk quickly splitting into two – one being something of a stub and the other adorned with a whole plethora of branches, sub-branches and twigs. This second branch is when the HTML writer gets to play, and the palette of elements they get to play with grows larger all the time! I guess my analogy might get strained though, my knowledge of Dendrology is limited, but suffice it to say that there are many HTML elements, some of which have fallen from favour, while still others have found favour and been embraced.

Without this tree as a foundation, front-end development is nigh on impossible. I can’t tell you how many times I’ve seen CSS or JS courses suggesting that a rudimentary knowledge of HTML is a requirement. Rudimentary knowledge? HTML is our bread and butter and, while we can use CSS to get a `div` to behave like a `span`, why not use a `span` in the first place? But this brings us neatly to our next side of the triangle: CSS.

CSS

It is arguable that if my fellow student had said CSS instead of HTML, then the laughter might’ve been even louder – this was a few years ago before you say anything. CSS acts as adornment for our DOM tree; it gives its elements’ colour if you will. That’s not to say that altering the colouring is its limit – but it’s still essential. Also, please take note of when they were laughing; CSS was then not Turing Complete (footnote: Turing Completeness denotes a language where a question is asked and answered – there is no guarantee how long that answer might take though). CSS3 was demonstrably Turing Complete in 2011, though follow through on the links please, its a fascinating read.

CSS3 is profoundly compelling and allows the canny front-end developer to avoid all sorts of weird and wonderful JS trickery. Trees in autumn can be bare and stark but can still hold a beauty all their own, but trees in the flush of Spring, Summer and Autumn are nigh on always a delight to behold. CSS serves as the foliage and, while I appreciate aesthetics plain HTML I love decorated trees, all the while knowing that without the foundation of HTML – the trunk and branches if you will – all that gorgeous adornment would be on the ground, blowing in the wind. 

via GIPHY

CSS has taken over from JS in some areas, though there is still a tendency for front-end developers to reach for JS rather than utilise CSS.

I can understand this: if all you’ve got is a hammer, everything looks like a nail. If I can do something quick and dirty using JS rather than research the CSS technique, then I used to do that. I did before I clocked just how performant it was to use the native capabilities inherent in CSS, it’s lightning-fast so learn and use it, please!

That brings us nicely to the next side of our triangle: JS.

JS

I dread to imagine what the reaction would’ve been to my fellow student saying JavaScript. I dare say snorts of derision rather than any form of laughter. JS has a history of being seen as something of a joke language, which is a shame as it is rather elegant – especially now.

If HTML is the bare tree and CSS is the foliage, then JS allows us to act like tree surgeons with superpowers! With JS we can make all sorts of alterations to the DOM (the DOM is, after all, merely an API for HTML). We can add, subtract and alter the constituents of the HTML with JS, we have superpowers with JS. But take heed of my caution above regarding CSS, just because you can do something with JS, first please check you can’t do the same thing with CSS! After all, with great power comes great responsibility! 

via GIPHY

There is an excess of books and courses on JS and the frameworks and libraries that have sprung up about it. Strangely, such an overabundance can present something of a barrier to those seeking to enter front-end development. With a whole feast presented to you, it’s easy to find an old and obsolete resource and end up eating something well past its sell-by date, getting food poisoning and resolving to give it up as a bad job.

But, should you find something bright, shiny and new and that works off the bat, or drink the kool-aid by some other route, the sheer power of JS can mean that you leave good old HTML and CSS by the roadside. You might even get tempted to start implementing some CSS-in-JS and never have to touch a CSS file throughout your career, only looking at the MDN Web Docs to find out what the JS name for a CSS property is.

Thoughts

I think it is this disconnect between JS and the other two sides of the triangle that prompted Chris Coyier to write about “The title ‘Front-End Developer’ is obsolete.”. Something of a provocative title and one that he doesn’t endorse but uses as a launchpad to explore the confusion regarding the term “front-end developer”. Most, if not all, job postings for front-end developers will ask for one of three things: Angular, React or Vue. That list is likely to change though, and it’ll change at a rate of knots, in much the same way as the things themselves and their associated toolchains will also change. Sometimes the postings won’t even mention HTML or CSS or will suggest candidates should know SCSS, further alienating those whose bread and butter is HTML and CSS.

Does this mean that we’re looking at a further sub-division within development? The need for developers dedicated to working with the front-end led to a separation of developers into front- and back-ends. Are we now seeing a further split between HTML and CSS developers and JS developers, with HTML and CSS developers getting short shift? I’m not so sure TBH, those dedicated JS developers do generate HTML and CSS, but do so via JS, leading to a further question of how well they appreciate the nuances of both HTML and CSS? Perhaps more of a focus during preparation for the career on these would suffice. HTML is rock solid, and CSS standardised nowadays so the necessity of knowing how anything other than evergreen browsers interprets identical HTML and CSS.

I’m not sure about what to do to address the situation of this further fracturing, or even if it’s worth discussing – I’m just conscious of it, and I’m wary of losing something. JS gives you superpowers and enables the canny developer to spin a whole DOM out of nothing, made up of HTML and CSS. The superpowered JS has some mean powers but still, in the end, relies upon a thorough knowledge of both HTML and CSS, it isn’t a one-man-band. All three together and employed skillfully are an orchestra with a profound impact and rich timbre. We owe it to ourselves as developers to embrace the full triangle. a cursory knowledge of HTML, CSS and JavaScript (JS). 

About

Dominic Myers is a front-end developer with a wealth of professional experience. He spends most of his day being fascinated by, developing and implementing the newest trends in web development, primarily HTML, CSS and JavaScript, or whatever will get the job done. He shares his knowledge online via his blog and forums such as Stack Overflow.

If you are involved in front-end and want to share your views, visit our latest survey and help shape the trends.

Did you enjoy this professional front-end developer guide? Do you have a topic that you are passionate about and would like to share with our developer audience in our blog? Get in touch!

Categories
Platforms

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

angular react

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.