JavaScript has become so pervasive that it can do much more than just front-end development. Ryan Chartrand put the two articles together in the 2017 JavaScript Status Report, which was just released by Stateofjs.com. Believe that as JS developers you must no longer confused.



Last year, 50,000 people were curious about the rise of JavaScript. Well, my fellow developers, now let’s take a look at 2018.


If you’ve spent 2017 isolated or busy with projects, this article is for you.


A lot of what happened in 2017 is setting the stage for a lot of action and innovation in 2018.

You can also use this article as a guide for planning your personal growth and launching more innovative projects.


React vs. Vue.js



Let’s cut to the chase and get right to the good stuff: Not many people think Vue could be a serious React competitor, but it’s impossible to ignore Vue this year, eclipsing Even Angular in terms of developer hype.


As we look ahead to 2018, we have two years of intense competition ahead of us, and there will be a lot of hype around Vue.

React has the financial backing of one of the richest companies in the world, not to mention an extremely talented maintenance staff.


But Vue does the following things that make developers really happy:


  • Vue is lightweight, easy to learn, has incredible tools, great state management and routing built in (!). And so on.


Vue’s community is certainly not as big as React’s, but it’s growing in terms of whether the core team has a good messenger and listens to customers.


Speaking of pleasing developers, let’s not forget Facebook’s epic failure this year with BSD+Patents, which annoyed a lot of developers.


We’ve now evolved to the point where you can start any project with Vue to make your life easier, which is an impressive achievement by their core team.


Here’s a great article comparing React, Vue, and Angular:


  • https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176


What might it end up like? Facebook will do what it does best: copy innovators and the world continues to use React.


If you’re an Angular developer who refuses to learn React, Vue should quickly become a better option for your career as Angular opportunities wither away (and some of Vue’s syntax is Angular).


Every JS developer should still consider learning vue.js because it has made enough splash and now we are starting to see demand for vue.js developers, which means you can create some value for yourself, at least in the short term.


Next.js


Then there’s Next-js, which we call “React insurance.”


While Facebook has never been ahead of the game and can’t match Vue in terms of innovation, React plus next.js gives you a much closer experience to Vue in terms of tool use, code cutting, routing, and state management, as well as giving you access to the massive React ecosystem and support.


Next is also particularly useful for server-side applications developed with React, which are becoming a growing trend.


Plus, add now.js (developed by the same team) and you get a super fast way to deploy React apps.


As the Vue/React war continues, expect to see more and more of the Next/React combo, which should make everyone in the React camp feel a bit more comfortable.


Angular


Angular will be one of the most widely adopted frameworks of 2018, even though it is getting harder to please developers.


Many companies have adopted Angular 1.0, and as they look to migrate to better frameworks in 2018-19, they will be looking to see if React or Vue is a better alternative to Angular 2.


The remaining Proponents of Angular have stated that Angular will be the JS framework of choice for enterprises, but this claim remains unproven and may not be proven in 2018.


Here’s everything you need to know about Angular in 2017:


  • https://medium.com/@chriscordle/why-angular-2-4-is-too-little-too-late-ea86d7fa0bae


Reason


Everything Facebook produces and uses is always worth watching.


Facebook is now using Reason to develop the Web version of Facebook Messenger and other projects (Whatsapp, Instagram, Ads, etc.).


In 2017, they also introduced Reason-React, which ties Reason to Reacy so that you can write Reason code that compiles into idiocy ReactJS.


So you can imagine how powerful OCaml + Reason (which now supports the React binding) could be without installing Babel (+ many plugins), Flow, etc. This is a big trend that needs to be developed.

Reason got a lot more attention in the JS space this year than most compiled JS languages, so it’s definitely one of the trends worth watching in 2018.


GraphQL


GraphQL is an API query language (which can be considered a modern version of REST).


GraphQL has lived up to the hype of 2017, with major companies like Yelp, Spotify, Github, Walmart, the New York Times, and now graphQL-based apis.


Some of these apis even support GraphQL specifically, and don’t even have REST options. In short: Innovators are betting on GraphQL. RESTful apis are certainly far from dead, but again, GraphQL is a hot option if you look at how startups are using it.


Alternatives like Falcor, on the other hand, barely have a voice to talk about.


If you want to get a job at an innovative company, now is definitely the time to start learning GraphQL.


Redux, Relay Modern, and Apollo


Redux was the ever-popular Dan Abramov/Andrew Clark project that quickly became the solution of choice for React state management and data fetching.


But GraphQL has changed the status quo, mainly in data fetching.


We now have Relay Modern (Facebook development) and Apollo, which allow you to grab and pass GraphQL data to the React app’s GraphQL client framework more efficiently than Redux.


But as one developer pointed out, Relay/Apollo/Redux:


These frameworks and their benefits need not be mutually exclusive. In fact, all of these together can provide a good separation of focus, which is so important for Web development.


This means that you can still use Redux with the Relay, which is used for local state management and some complex non-server state that the Relay then grabs.


But the community is anxious about simplifying things (so far the only answers are vue.js or Cashay).


Storybook


Wow, storybooks are really on fire in 2017.


Storybook is an environment for defining, developing, and testing UI components.



It went from almost a backwater at the beginning of the year to a mid-year pandemic, thanks to a huge community effort. This is an incredibly inspiring story that shows how open source work should evolve, and it’s really worth reading:


  • https://medium.com/storybookjs/the-storybook-story-dd3c1ab0d2ce


Storybook is so useful (and fun to use) that you can open and test the UI separately. It’s like a real-time UI design guide that provides real value to developers.


You’ve probably come across open source projects designed in Storybook, but if you want to see it in action for yourself, check out Airbnb’s date picker designed in Storybook.


If you want to stand out as a developer in 2018, use Storybook to show off your latest project during your interview.


Bonus tip: I suggest you also check out React-BlueKit, the Storybook replacement Netflix’s engineering team uses to design their component library.


Prettier


Prettier, as its name suggests, is a code formatter that makes code more readable and pretty.


foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());


To:


foo(  reallyLongArg(),  omgSoManyParameters(),  IShouldRefactorThis(),  isThereSeriouslyAnotherOne() );


It has 18, 000 stars on GitHub, and developers love the simplicity and value of the project.

It’s also used in many other projects you love, such as Webpack, React, Next. Js, Babel, etc.


Again, you can become a Go developer and enjoy its features without having to install it.

Jest and Enzyme


Jest is definitely the leader when it comes to JavaScript testing, and Enzyme is a good addition, especially when developing React applications.


As you can see here, Jest now dominates Jasmine in terms of downloads.


Jest Snapshots really got going in 2017, making handling tests a lot less painful. You can check out this talk from React Conf 2017 to learn all about it.


Enzyme, developed by Airbnb’s engineering team, is a JavaScript library that tests the React component. It has received 12,000 stars on GitHub since 2016.


The extremely simple Jest and Snapshots + Enzyme test apis for the React component make for a very strong test combination that will continue to gain popularity in 2018.


Webpack


Webpack has emerged as the most popular asset packaging tool. Webpack also had an incredible year.

This time last year, Webpack was barely documented, and most developers didn’t know how to start using it.


Then, earlier this year, I wrote an article about how amazing it was that Webpack had secured $15,000 in three months to fund the project. And now they’ve raised hundreds of thousands of dollars.


Not only does Webpack pave the way for open source projects to thrive, but the project has maintained strong momentum throughout the year.


Thankfully, Sean Larkin is still leading Webpack, so there’s no end in sight to Webpack’s next success.


Because the project is so well supported (and they care so much about the community), this is the best forecast trend for 2018.


Parcel


But for every large-scale trend, there is also a growing ranks of disaffected developers.


Parcel, a competing packaging tool, is also gaining momentum fairly quickly and currently has 12,000 stars on GitHub, threatening Webpack’s position.


Parcel’s selling point is that other packaging tools are getting too big, and Parcel packs twice as fast as Webpack (10 times faster with caching).


It also addresses Webpack’s somewhat confusing configuration Settings, which Parcel does not.


Just point it to the entry point of your app and it will do the right thing.


While the simplified configuration and speed improvements are good improvements, I wouldn’t be surprised if Webpack didn’t copy them in the first half of 2018.


Similar to Vue versus React, the little guy is always innovating faster, but it depends on which innovations inspire the big guys to improve their projects.


Gatsby


Gatsby is a static website generator developed by Kyle Mathews for React.


Since Kyle worked on Gatsby full-time last year, the thing has really started to gain momentum.


The React website was built on Gatsby itself, and there could be no better proof.


Gatsby was all about performance and giving React the fastest possible Web experience.


This picture on their website gives you an idea of how it might work:



Gatsby also made use of advanced Web technology to pre-capture resources for other web pages, making browsing as fast as lightning.

While Gatsby wasn’t going to rule the industry by any means, it was a great solution for developing fast, static websites and will continue to be popular.


To learn more about Gatsby, check out this article:


  • https://www.gatsbyjs.org/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/


Babel


There is no need to introduce Babel at this point, and for the most part it will continue as a trend.


All in all, 2017 was a good year for Babel, which is focused on developing Babel 7 (hopefully in early 2018). Most importantly, they wrote a song 🙂


Babel’s only worry is that Reason is becoming mainstream.


But so far, Babel is poised for another strong year in 2018.


Flow & Typescript


Typescript and Flow are good statically typed options for JavaScript developers to use to improve the quality of their code.


We won’t necessarily see who destroys whom in 2018, so they will co-exist, each serving a different use case.


Facebook-based Flow was a priority for React developers because it is easy to integrate with Babel and is widely used in React projects.


Microsoft TypeScript is popular among Angular 2+ developers because it is the primary language.


The growth of these two will probably stall in 2018, and the real question now is whether Reason will replace them in the future.


Immutable.js


One Reddit user described it this way, and I love it:


ImmutableJS ensures that developers on large teams don’t do stupid things.


In short: Immutable. Js, another Facebook project, ensures that state doesn’t mutate by using Immutable objects.


As our Redditor pointed out, this can be extremely useful for developers with large teams, who often inadvertently mess up the status.


Data encapsulated in an Immutable.JS object never changes. It always returns a new copy. This is an envy-inducing contrast to JavaScript, where some operations don’t change your data (such as data methods like Map, filter, concat, forEach, etc.), but some do (Array pop, push, splice, etc.).


There are considerable limitations to using Immutable.JS, but those limitations may not be relevant depending on your needs. You can learn more about this article.


Immutable, which has over 20,000 stars on GitHub, has been on the rise since 2017 and is expected to continue into 2018 as developers take time to understand the concepts and trade-offs.


Popmotion


Popmotion is a JavaScript animation library that quickly earned stars on GitHub.



Think of it as Flash predicting jQuery.


Now, I realize that using those two words in a sentence doesn’t help sell this increasingly popular library.

But the more you dig into the library, the more you realize that there is a group of people who have deep complaints about both jQuery and Falsh, and desperately need to make things better.


Popmotion has a much better experience, with a lot of innovation in web animation. This is certainly one of the trends to watch in 2018.


You can check it out on this website.


React Native & Electron


React Native lets you develop React apps for mobile devices, while Electronlets lets you develop JavaScript apps for the desktop.


Both frameworks gained a foothold in 2017, and both are good solutions for everything from JavaScript to native apps.


Some of the most popular apps developed with Electron include Slack, Atom, Github Desktop, and Discord.

Popular apps developed with React Native include Facebook, Instagram, Airbnb, and UberEATS.



You can now also develop React Native for Windows.


It’s a great time to be a JavaScript developer anyway, considering how much easier it is to develop desktop and mobile apps.


Bonus tip: Web Assembly


With support for these four browsers, Web Assembly is almost complete. But it’s too early to call 2018 a trend. Give it another 12 months.


But keep an eye on it, because that’s what everyone’s looking at right now.


2018 Learning Materials


With all of these trends in mind, here are a few things you can learn in 2018 to stay competitive and reach your potential as a remote developer:


  • Be brave and learn vue.js

    • https://vuejs.org/v2/guide/


  • Every React developer should learn next.js

    • https://learnnextjs.com/


  • Start learning Reason (and Reason React) and try it as a side project

    • https://protoship.io/blog/2017/05/10/an-invitation-to-reasonml.html


  • GraphQL must be on your 2018 to-do list.

    • http://graphql.org/learn/


  • Follow Relay Modern, this is one of the data fetching options for React+GraphQL.

    • https://hackernoon.com/getting-started-with-relay-modern-for-building-isomorphic-web-apps-ae049e4e23c1


  • Storybook! Storybook! Storybook!

    • https://storybook.js.org/


  • Install Prettier on a project to make your code more readable.

    • https://github.com/prettier/prettier


  • Learn to use Jest screenshots and Enzyme on a React project.

    • https://facebook.github.io/jest/

    • https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f


  • Learn Flow (React developers) or TypeScript (others).

    • https://flow.org/en/docs/getting-started/

    • https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html


  • Consider using Gatsby to convert Markdown text into static pages.

    • https://github.com/gatsbyjs/gatsby


  • Develop a mobile app with React Native.

    • https://egghead.io/courses/react-native-fundamentals


  • Develop a desktop app with Electron.

    • https://medium.freecodecamp.org/how-to-build-your-first-app-with-electron-41ebdb796930


  • Play Popmotion to create a smooth animation.

    • https://popmotion.io/learn/get-started/


  • Import this resource list as the Todoist project.

    • https://todoist.com/importFromTemplate?t_url=https%3A%2F%2Fd1aspxi4rjqbaz.cloudfront.net%2F22bde66c67091e080cfc3bb98a547 058_2018%2520Study%2520Guide.csv

CSDN