JavaScript is at the top of several lists of the most popular technologies. No surprise there. Owns the front end, big presence on the backend, too.
Stack Overflow 2018 Developer Survey, for programming languages, JS on top for the 6th straight year
Source: Stack Overflow 2018 Developer Survey - Languages
Octoverse says roughly the same thing
Source: Octoverse - Top Languages
Frameworks, Libraries, and Tools, Angular topping React
Source: Stack Overflow 2018 Developer Survey - Frameworks
State of JS approaches their survey in a little different way, React has a big edge on the "Used it, would use again"
Source: State of JS 2018 - Front-end Frameworks
State of JS 2018 Individual framework pages:
Most Loved Frameworks - React love
Most Dreaded Frameworks - Angular creeping up towards the top
Source: Stack Overflow 2018 Developer Survey - Most Loved, Dreaded Frameworks
VS Code somehow the most popular editor now
Source: Stack Overflow 2018 Developer Survey - Most Popular Dev Environments
- React v16
-
- Return array of elements and strings from
render
method - Fragments
return ( <> <Child0 /> <Child1 /> <Child2 /> </> ) // Or return ( <React.Fragment> <Child0 /> <Child1 /> <Child2 /> </React.Fragment> )
- Return array of elements and strings from
-
- Context API
- Pass data to deeply nested components without passing props all the way down
- Use cases:
- Authenticated users
- Themes
- Preferred language
- Context API
-
- Pointer events
onPointerDown
onPointerMove
onPointerUp
onPointerCancel
onGotPointerCapture
onLostPointerCapture
onPointerEnter
onPointerLeave
onPointerOver
onPointerOut
- Pointer events
-
- Support for React DevTools Profiler
-
- Suspense for code splitting
// This component is loaded dynamically const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <React.Suspense fallback={<Spinner />}> <div> <OtherComponent /> </div> </React.Suspense> ); }
-
Coming soon:
- React Hooks (~Q1 2019)
- Allows you to write
function
components with local state and lifecycle hooks
import { useState, useEffect } from 'react'; function Example() { // create state variable and setter fn const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
- Good articles on hooks:
- Allows you to write
- Concurrent Mode (~Q2 2019)
- Suspense for Data Fetching (~mid 2019)
- React Hooks (~Q1 2019)
-
- Vue surpassed React in Github stars
- Vue: 124k
- React: 119k
- Vue CLI 3.0 released in August (release announcement)
- Vue 3.0 announced
- Roadmap
- Planned release: End of Q2 2019
- Features
- Compiler rewrite
- Added TSX for improved Typescript support
- Speed, size, and memory improvements
- Experimental Hooks API
- Easier debugging with improved warnings and easier to trace re-renders
- Angular v6
- New CLI commands
ng update
- recommends dependency updatesng add
- adds new capabilites to you app like PWA or Angular Elements
- Angular Elements
- Register Angular components as custom elements
- A lot of new Angular Material components
- New CLI commands
- Angular v7
- Still no Ivy Compiler
- Smaller, simpler, and faster
- Tree shaking
- Mostly bugfixes
- Still no Ivy Compiler
Only one major release this year, version 4 in April. I'll highlight 3 things, although there are a lot more
- Updated TypeScript bindings
- Dropped support for IE < 11
- Dropped lodash dependency, so Redux became smaller by about 15% minified
Lots of changes in TypeScript this year. The year started with 2.7, including TypeScript 3 being released on July 30. Mainly just want to cover the significant changes in Typescript 3+. You can follow these yourself on the What's new in TypeScript page
// Only equality operators are allowed with unknown
function f10(x: unknown) {
x == 5;
x !== 10;
x >= 0; // Error
x + 1; // Error
x * 2; // Error
-x; // Error
+x; // Error
}
// No property accesses, element accesses, or function calls
function f11(x: unknown) {
x.foo; // Error
x[5]; // Error
x(); // Error
new x(); // Error
}
TypeScript 2.9 and earlier didn’t leverage React defaultProps declarations inside JSX components. Users would often have to declare properties optional and use non-null assertions inside of render, or they'd use type-assertions to fix up the type of the component before exporting it.
export interface Props {
name: string;
}
export class Greet extends React.Component<Props> {
render() {
const { name } = this.props;
return <div>Hello ${name.toUpperCase()}!</div>;
}
static defaultProps = { name: "world"};
}
// Type-checks! No type assertions needed!
let el = <Greet />
Allows package maintainers to support updated typescript types.
{
"name": "package-name",
"version": "1.0",
"types": "./index.d.ts",
"typesVersions": {
">=3.1": { "*": ["ts3.1/*"] }
}
}
This package.json tells TypeScript to check whether the current version of TypeScript is running. If it's 3.1 or later, it figures out the path you've imported relative to the package, and reads from the package's ts3.1 folder. That's what that { "": ["ts3.1/"] } means - if you're familiar with path mapping today, it works exactly like that.
On a project we were working on this year, we were running into some big compile performance issues related to using React Material UI and interaction with TypeScript. There were some changes to TypeScript that came out of this that improved performance. Here is the Issue that explains it the best.
There are quite a few big things in the works for React Native for the future, but as far as what happened in 2018, mainly one big release 0.56 in July.
- Upgraded to Babel 7
- Updated to Android latest versions, resulting in faster builds and new Play Store reqs.
- Node 8 is now standard, along with React 16.4.
- Dropped iOS 8 support.
- Added lots of flow types
Some post 0.56 changes to note Full Changelog:
- Switched from using UIWebView to the newer MKWebView within the WebView component, and is pulled out into it's own separate repo now.
- Accessibility API improvements
- React up to 16.6.3 as of 0.57.8
Source: React Native blog "Releasing 0.56"
Sources: Kaelan Cooter
- object rest/spread properties
- Rest
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x; // 1 y; // 2 z; // { a: 3, b: 4 }
- Spread
let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 }
- asynchronous iteration
for await (const line of readLines(filePath)) {
console.log(line);
}
Promise.finally
- OffscreenCanvasAPI
- Chrome and Firefox (with flag)
- Send canvas rendering to a web worker
- Web Animations API
- Chrome, Firefox, and polyfill
- Similar to jQuery's
.animate()
but built into the browser
var options = { iterations: Infinity, iterationStart: 0, delay: 0, endDelay: 0, direction: 'alternate', duration: 700, fill: 'forwards', easing: 'ease-out', } var keyframes = [ { opacity: 0 }, { opacity: 1 } ]; var element = document.querySelector('.animate-me'); element.animate(keyframes, options);
- WebAssembly adoption has been slow
- Binary instruction format with near-native performance. Use any language with a Web Assembly target
- A good option for data-heavy applications
- Image/video editing
- Video games
- VR
- Encryption
- C++, Rust, and Typescript are popular choices