Saturday, 27 January, 2018 UTC
Summary
## 2017 was a great year for javascript developers, so many tools and amazing technologies was rivield.
React is sky rocking in a different level after the mistakes made by the angular team lots of people look for alternative and with a Facebook name on it, React is the most popular framework today!
> *Honorable mention for React is tools like Redux and Mobx to manage store and tools like storybook to manage ui *
>
> *components.*
My prediction for 2018 trends:
Front End
During 2016 to mid 2017 we had front end library born every minute, the all story felt like a mess, it was hard to focus when there is so many tools coming out, I fill now there is more focus on improving existing tools and not just creating new one.lets talk on the tools you should focus on this year.
Vue.js
Vue (pronounced/vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.
Vue is sky rocking for a library develop by an independent developer and not a giant like google and Facebook, it’s amazing it got that far that fast! a very successful collaboration between Laravel and Vue (Laravel – the most popular framework for php).
The creator of Vue explain number of times how he learn from React Angularjs mistakes, and when you developing in Vue you can definitely feel that. To start a new Vue project with or without the cli is extremely easy, a rear option this days. Many feels Vue will be the next Jquery.
Vue Core Libraries:
- Vuex – Store Management
- Vue Router – Official Router
- Vue server renderer – Official SSR Solution
Honorable mention will be Nuxt.js a server rendering solution base on Vue.
React.js
| ### Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
| ### Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
| ### Learn Once, Write Anywhere
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.
|
React is a great UI library, no surprise there, there is article on how react improving JavaScript programmer, and i can’t agree more, React structure and the tools use are all advanced tools that will become standard, until then React use babel and teaching us all on the great features coming to JavaScript.
***Honorable mention to the front end section will be probably Angular.***
- - - - - -
### Apps
Electron
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.Watch the video
Electron also coming with a big name behind it (Github) and with a very successful project like visual code and others this project is definitely here to stay!
React Native
| React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. |
## A React Native app is a real mobile app
With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
|
|
## Don’t waste time recompiling
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With [Hot Reloading](http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html), you can even run new code while retaining your application state. Give it a try – it’s a magical experience.
|
## Use native code when you need to
React Native combines smoothly with components written in Objective-C, Java, or Swift. It’s simple to drop down to native code if you need to optimize a few aspects of your application. It’s also easy to build part of your app in React Native, and part of your app using native code directly – that’s how the Facebook app works.
|
React Native ecosystem is very reach, it make it very easy to get started!
Microsoft and React Native collaboration bring us this plugin to build desktop apps with React Native: https://github.com/Microsoft/react-native-windows
Server
### GraphQL
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.
GraphQL is a new way for server client communication, the technology is much more advanced than the good old REST API way, with GraphQL “The client can ask much more specific question when asking for data from the server.”
> *honorable*
>
> * mention will be [Apollo](https://github.com/apollographql) a great way to interact with GraphQL*
Adonis
AdonisJs is a Node.js web framework with a breath of fresh air and drizzle of elegant syntax on top of it. We prefer developer joy and stability over anything else.
Adonis is an MVC framework for NodeJs very similar to Laravel, Adonis provide ecosystem for creating servers and web apps, with a wide range of tools and methods like ORM, Template engine, Auth and many more, give it a try and fill how easy it to focus on your apps when you get this wide range of tools and structure (make you think kess on how you going to structure and providing a common language for developer working on the same project).
### 2018 Goals
Learning list for 2018
- Vue.js + Nuxt.js
- React.js + Next.js
- React Native
- GraphQL
- Prettier
- Jest
- React Native
- Electron
- Webpack
- Adonis
- Firebase + serverless