If you’ve been living under a rock or buried in projects throughout 2017, this is the article for you. A lot happened in 2017 that we’ve been carefully watching at setting up 2018 for a lot of action and innovation. X-Team , You can also use this as a guide to plan out your growth as a developer in 2018 to help you get on more innovative projects. React vs. Vue.js Let’s get straight to the good stuff: This time last year, not many had faith that would ever become a big competitor to when it comes to major companies adopting it, but it was impossible to ignore Vue this year, even sending Angular a bit into the shadows in terms of developer hype. Vue React As we look ahead to 2018, we’re about to embark on an intense next 2 years filled with a lot of excitement for . Vue But let’s not forget React still has the financial backing of one of the richest companies in the world, not to mention some incredibly talented maintainers. Both core teams also collaborate and inspire one another. So what’s giving Vue the spotlight? Vue is doing all the things that make developers happy: really Vue is lightweight, easy to learn, has incredible tooling, has great state management and routing built-in (!), etc. Vue’s community certainly isn’t as large as React yet, but communities grow based on whether the core team has great ambassadors and listens to its community (both of which are in place). When it comes to pleasing developers, let’s not forget Facebook’s epic fail this year with the BSD + Patents license snafu that went over with developers. really well Sure, Twitter wars never killed a framework, but we’ve seen before how mismanagement (ex: Angular 2 delay) can create a window of opportunity to allow an alternative to step in and take the spotlight. Here’s a great write-up on from this year. React vs. Vue vs. Angular The likely end scenario? Facebook does what it does best: copy the innovators and the world continues to use React. Every JS developer should still consider learning Vue.js, as it’s made a big enough splash to where we are starting to see the requests for Vue.js developers for hire come in, meaning you can create some value for yourself in the short-term at least. Next.js And then there’s , which we’ll call ‘insurance for React.’ Next.js in terms of tooling, code splitting, routing and state management, allowing you to also retain the massive React ecosystem and support. React coupled with Next.js gets you much closer to the Vue experience Next is also especially useful for server-side rendered apps built in React, an increasing trend on its own. Plus, add in (created by the same team) and you have a super fast way to deploy your React apps. Now.js As the Vue vs. React debate continues among development teams and managers, expect to see more and more adoption of Next in tandem with React. Angular Despite Angular’s growing difficulties at pleasing developers, it will still continue to be a widely used framework in 2018. Many major companies adopted Angular 1.0 years ago, and as they look to migrate to something better in 2018–19, they’ll be looking at React or Vue.js as potential alternatives to Angular 2. Angular’s remaining advocates have taken the stance that Angular will be the JS framework of choice for the enterprise because big companies like OS projects backed by a big company (Google). But can’t the same argument be made about React and Facebook? Here’s everything you need to know about what happened to Angular in 2017. Reason It’s always worth paying attention to anything that Facebook is using in production. Facebook now uses (their take on the already well-established OCaml) , among other projects (WhatsApp, Instagram, Ads, etc.). Reason for the web version of Facebook Messenger In 2017, they also released which creates bindings for React so you can actually write Reason code that compiles to idiomatic ReactJS. reason-react So imagine not needing to install Babel (+ many plugins), Flow, etc. and only needing the power of OCaml + Reason (which now supports React bindings). That’s a big trend waiting to explode. Reason gained far more attention this year in the JS realm than most other compile-to-js languages (sorry Elm, we still love you anyway), so it’s definitely one to keep watching and playing with in 2018. GraphQL is a query language for APIs (think: a modern take on REST). GraphQL GraphQL lived up to the hype in 2017, as major companies like all now have GraphQL-based APIs. Yelp, Spotify, Github, Walmart, NYTimes, etc. Some of these APIs are even exclusively GraphQL, with no REST option even available. Put simply: innovative companies are placing their bets on GraphQL. RESTful APIs are certainly far from dead, but again, looking at the trends of where startups are moving, GraphQL is a popular option. Alternatives like Falcor, on the other hand, are barely ever discussed anymore. This is definitely the time to start learning GraphQL if you want to get jobs at innovative companies. Redux, Relay Modern and Apollo is the ever-popular / project that quickly became the go-to solution for state management and data fetching in React. Redux Dan Abramov Andrew Clark But GraphQL really shook things up for Redux, primarily when it comes to data fetching. We now have (created by Facebook) and , GraphQL client frameworks that let you fetch and pass GraphQL data into your React app more efficiently than Redux can. Relay Modern Apollo But as one developer about Relay/Apollo/Redux: points out These frameworks and their benefits do not have to be mutually exclusive. In fact, using them together can provide a nice separation of concerns that is so important in web development. This means you can still use Redux in tandem with Relay, using Redux for local state and some complex non-server state and then Relay for fetching. But the community is anxious for something to simplify this (and so far the only response is Vuex/ or ). Vue.js /Apollo Cashay Storybook Wow, Storybook really blew up in 2017. is an environment for defining, developing, and testing UI components. Storybook It went from practically dead at the start of the year, to massively popular in mid-2017 thanks to a huge community effort. It’s such an inspiring story of how open source work should evolve and worth reading about. It’s so incredibly useful (and even fun to use), letting you build and test UI components in isolation. It’s like a living UI styleguide that actually provides real value to the developer. You’ve likely come across an open source project using Storybook already, but to see it in action for yourself, check out the Storybook for Airbnb’s date picker. If you want to stand out as a developer in 2018, then show up to an interview with a Storybook from your last project. Also check out , a Storybook alternative that the engineering team at for their components library. Bonus: react-bluekit Netflix is using Prettier As the name suggests, is a code formatter that makes your code much more readable and, well, pretty. Prettier foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne()); becomes… foo(reallyLongArg(),omgSoManyParameters(),IShouldRefactorThis(),isThereSeriouslyAnotherOne()); With more than , developers are loving this simple and valuable project. 18,000 stars on Github It’s also used on a ton of other projects you likely already love, like Webpack, React, Next.js, Babel and more. Then again, you could just become a developer and not even need to install this. Go Jest and Enzyme When it comes to JavaScript testing, has certainly taken the lead, with as an excellent complement when specifically building React apps. Jest Enzyme , Jest is now dominating Jasmine in downloads. As you’ll see here Jest’s Snapshots feature really took off in 2017, making it far less painful to deal with testing. Watch this talk from React Conf 2017 to learn all about it. , created by Airbnb’s engineering team, is a JavaScript library for testing React components. It’s exploded to 12,000 stars on Github since 2016. Enzyme Jest’s Snapshots + Enzyme’s super simple API for testing React components makes for a great testing combo that will continue to rise in popularity in 2018. Webpack has risen to become the most popular asset bundler. Webpack has also had an year. Webpack INCREDIBLE This time last year, Webpack barely even had documentation and most developers had no idea how to get started with it. Then, by the start of the year, I wrote about how incredible it was that ( ) to support the project. They now have hundreds of thousands of dollars in funding. Webpack had raised $15,000 in 3 months and how happy we were to be one of its earliest sponsors Not only is Webpack paving the future of how open source projects can thrive, but the project’s development has maintained its massive momentum throughout the year. And with thankfully still leading the Webpack movement, there’s really no end in sight for what Webpack is capable of achieving next. Sean Larkin Because of how well supported this project it is (and how much they care about their community), it makes it the easiest trend to predict for 2018. Parcel But with every massive trend, there is a rising force of disgruntled developers. Parcel, a competing bundler, is gaining momentum rather quickly with 12,000 Github stars out of the gate in 2017 and going directly after Webpack. Parcel’s pitch is that all other bundlers have become too bloated, while Parcel works twice as fast at bundling as Webpack (10 times faster when using its cache). It also goes after Webpack’s somewhat confusing configuration setup, as with Parcel, there is no configuration needed. “Just point it at the entry point of your application, and it does the right thing.” Although simplifying configuration and improving speed are both great improvements, I wouldn’t be surprised if Webpack doesn’t copy these improvements by the first half of 2018. Similar to Vue vs. React, the little guy will always innovate faster, but it’s up to the big guy to be inspired by that innovation and improve their projects. You can read the whole debate here. UPDATE: Webpack v4 now comes with zero configuration out of the box. Gatsby is a static site generator for React built by Gatsby Kyle Mathews. Ever since Kyle went full-time on Gatsby last year, it’s really started to pick up momentum. There’s no better proof of that than the fact that the is built using Gatsby. React website itself Gatsby is all about performance and delivering the fastest possible web experience in React. This diagram from their website gives you an idea of how it works: Gatsby also uses progressive web tech that prefetches resources for other pages, so browsing is lightning fast. Although Gatsby isn’t going to dominate the industry by any means, it’s a fantastic solution for building fast static sites that will continue to rise in popularity. For more on Gatsby, read this post. We were also happy to Gatsby’s development this year. sponsor Babel Babel needs no introduction at this point and remains a trend essentially by default. All in all, it was a good year again for Babel, primarily focused on building Babel 7 (hopefully launching early 2018). Most importantly, they wrote a :) song Babel’s only concern currently (aside from its extraordinary maintainer taking an ), is something like becoming mainstream. indefinite/vague break from the project Reason But for now, Babel should continue strong throughout 2018. We were also happy to Babel this year. sponsor Flow & Typescript and are both great static type options for JavaScript developers to be using to improve their code quality. Typescript Flow We likely won’t see one overtake the other in 2018 in terms of popularity, as both have survived together, serving different use cases. Flow, built by Facebook, is the preferred choice for React developers since it easily integrates with Babel, also commonly used in React projects. TypeScript, built by Microsoft, is popular among Angular 2+ developers as it’s the primary language. 2018 will likely be dull in terms of advancements from these two, and the real question in the following years will become whether something like Reason replaces them both. Immutable.js I like the way one redditor described : Immutable.js immutableJS ensures that developers on large teams don’t do something stupid. Put simply: , another Facebook project, makes sure state isn’t mutated by using immutable (unchangeable) objects. Immutable.js As our redditor friend pointed out, this can be incredibly useful in a large team of developers that can screw up state unintentionally. Data encapsulated in an Immutable.JS object is never mutated. A new copy is always returned. This contrasts with JavaScript, in which some operations do not mutate your data (e.g. some Array methods, including map, filter, concat, forEach, etc.), but some do (Array’s pop, push, splice, etc.). There are some pretty big limitations to using Immutable.JS, but limitations that might not matter depending on your needs. You can read more about them here. With 20,000 stars on now, Immutable.js has risen in popularity in 2017 and can be expected to continue to rise in 2018 as developers start to take the time to understand the concept and the tradeoffs. Github Popmotion is a JavaScript motion library quickly gaining stars on Github. Popmotion Think of it like Flash meets jQuery. Now, I realize using those two words in the same sentence doesn’t help sell this increasingly popular library. But the more you dive into this project, the more you discover a group of people who had serious with both jQuery and Flash and simply needed to make things better. gripes And Popmotion is truly a better experience with a lot of innovation around web animation just starting to boil. This is one to watch in 2018 for sure. to start getting teased into trying it. Check out their site React Native & Electron allows you to build React apps for mobile devices, while lets you build JavaScript apps for desktops. React Native Electron Both became well-established frameworks in 2017 and both are great solutions for going from JavaScript to a native app. Some notable apps built on Electron include: Slack, Atom, Github Desktop and Discord. And popular apps built with React Native include: Facebook, Instagram, Airbnb and UberEATS. You can also now build React Native apps for Windows. Regardless, it’s a good time to be a JavaScript developer considering you can build apps for both desktop and mobile far more easily than in the past. Bonus: Web Assembly now supporting , we’re almost there. It’s still too early to call it a trend for 2018, so we’ll update you in 12 months. With all 4 browsers Web Assembly But keep this on your radar, as everyone is looking very closely at this now. 2018 Study Materials After looking at all of the trends ahead, here’s what we’d recommend you consider learning in 2018 to remain competitive as a remote developer and your potential: unleash Be daring, learn Vue.js Every React developer should learn Next.js Start (and ) and try it out on a side project. learning Reason ReasonReact is a must for your 2018 to-do list. GraphQL Followed by learning , the go-to option for data fetching in React+GraphQL apps. Relay Modern Storybook! Storybook! ! Storybook Install on a project and make your code more readable. Prettier Learn and use snapshots in tandem with on a React project. Jest Enzyme (React developers) or (Everyone else). Learn Flow TypeScript Consider for building something from Markdown -> Static pages. Gatsby Build a mobile app using React Native. Build a desktop app using . Electron Play around with to create a smooth animation. Popmotion Import this list of resources as a : Todoist project Ryan Chartrand is the CEO of X-Team , a global team of motivated remote JavaScript developers who can join your team and start executing today. JavaScript Developers: Work from anywhere. Get great projects. Be supported to learn, grow and stay motivated. Join the X-Team community today. Enjoy this post? Next read: How I overcame remote working’s great challenge.
