JavaScript:
Who, Where, What, Why and Next
JSConf Asia, 2019-06-16
Read these slides on your own device:
Who is this guy?
Laurie Voss
Chief Data Officer & co-founder, npm Inc.
@seldo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seldo/images/380749/Twitter_logo_blue.png)
This is a talk about microfrontends
Not really
What are we talking about?
- Who are we?
- Where are we deploying?
- What are we using?
- Why are we doing this stuff?
- Next: what's in the future?
What are you
getting out of this?
- A warm fuzzy feeling
- A thing to migrate away from
- A new exciting thing to learn
How do I know this stuff?
- npm Registry download stats
- The npm 2018/2019 user survey
- The State of JavaScript Survey 2018
State of CSS
Disclaimer 1:
This talk contains both fact and opinions
Please do not get mad about graphs.
Disclaimer 2:
"Most popular" is not the same as "best"
But popularity remains a useful metric.
Disclaimer 3:
I swear a lot
WHO
npm: the biggest software registry, ever
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199299/module_counts_2019-05.png)
JavaScript: biggest on GitHub
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199303/github_top_languages.png)
JavaScript: biggest on Stack Overflow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199307/stack_overflow.png)
JavaScript is the most popular programming language ever
JavaScript developers are getting more sophisticated
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199317/How_long_have_you_been_using_JavaScript_.png)
JavaScript developers are getting more experienced with npm
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199323/How_long_have_you_been_using_code_from_npm_.png)
~99%
of JavaScript users use npm
More experienced users care more
about best practices
We care about security more
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199326/Are_you_concerned_the_OSS_code_you_use_is_secure_.png)
npm audit
and npm audit fix
335,775,921 audits in the last 30 days
npm Enterprise
- yourco.npme.io
- Share and discover internal JS
- Full search
- Package pages and online docs
- SSO (Google, Okta, Auth0, etc.)
- Security and compliance reporting
29% of JavaScript developers can't use certain licenses
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199337/Does_a_npm_package_license_impact_your_decision_to_use_it_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199338/Does_your_company_prevent_prohibit_you_from_using_certain_licenses_.png)
WTFPL:
it's funny but nobody likes it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199340/What_licenses_does_your_company_prevent_you_from_using_.png)
25% of JavaScript devs don't consider it their primary language
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199344/Do_you_consider_JavaScript_to_be_your_primary_language_.png)
Other primary languages for JavaScript devs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199345/Top_10_Languages_written_by_non-primary_JavaScript_developers.png)
WHERE
97% of JavaScript developers write code for browsers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199354/Where_does_your_JavaScript_run_.png)
Desktop web vs. mobile web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199356/browsers-targets.png)
Native apps
What does that mean though?
Native apps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199364/native-targets-all-users.png)
Native desktop apps
- 26% of developers write native desktop apps
- 21% of developers say they use Electron
- What do the other 5% use?
Native mobile frameworks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199382/Native_frameworks.png)
Deploy targets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199388/deploy_targets.png)
WHAT
The registry always grows
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6256893/downloads.png)
Everything in the registry grows
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6255079/frameworks-absolute-growth.png)
Share of Registry
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6255088/frameworks-share-of-registry.png)
React
has conquered
the web
63% of JavaScript developers use React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199402/characterize-react.png)
47% of JavaScript devs write React some or most of the time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199407/frequency-react.png)
AngularJS and Angular
are totally different things with the same name.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6255098/graph-angular.png)
37% of npm users write AngularJS or Angular
- 20% AngularJS (1.x)
- 29% Angular (2.x+)
27% of JavaScript devs use Vue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6255100/graph-vue.png)
Web components
We're just not that into them.
Back-end frameworks
...remember them?
Server Side Rendering
Everything old is new again.
Doesn't this seem kind of familiar?
Express still dominates
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199430/express.png)
8% of JavaScript devs use Gatsby
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199431/graph-gatsby.png)
9% of JavaScript devs use Next.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199432/graph-next.png)
5% of JavaScript devs use Nuxt
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199433/graph-nuxt.png)
Nest.js: it's a thing!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199435/graph-nest.png)
GraphQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199440/graph-graphql.png)
GraphQL: get on board
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199441/Do_you_use_GraphQL_.png)
The hottest trend in JavaScript
is not writing JavaScript
63% of JavaScript devs use TypeScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199443/How_would_you_characterize_your_usage_of_TypeScript_.png)
36% of JavaScript devs write TypeScript some or most of the time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199446/How_often_do_you_write_TypeScript_.png)
The @types scope
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199450/The__types_scope_with_TypeScript.png)
WebAssembly:
use any language on the web
WebAssembly on npm
The call is coming from inside the house.
WebAssembly: early days
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199458/webassembly.png)
WHY
Team A | Team B
Why is JavaScript so popular?
Empirical Analysis of Programming Language Adoption
Meyerovich & Rabkin, 2013
The inescapable pull of JavaScript libraries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199472/node-modules-gravity-well.png)
The reluctant JavaScripters
This happened already
TypeScript is being driven by reluctant JavaScripters
WebAssembly frees the reluctant from JavaScript
Don't fear the WASM
Why is React so popular?
React: the component model the web always wanted
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199477/react-color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199478/react-datepicker.png)
React component libraries
React hooks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199480/react-use-samples.png)
React: its own gravity well?
But... Vue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6255100/graph-vue.png)
The back-end:
a whole new world
Is letting React take over
a good idea?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6255150/build-react-into-the-browser.png)
NEXT
Right now: tink
Run "npx tink" to try it yourself!
Soon: a component-based future
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6199488/abramov-vb.png)
Don't fear the app builder
WebAssembly
Native apps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/6255212/the-thing-we-call-web-development.png)
"With great power comes great responsibility"
– Gandalf, probably?
I ❤️ you
@seldo
laurie@npmjs.com
Slides available:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seldo/images/380749/Twitter_logo_blue.png)
JavaScript: Who, Where, What, Why and Next
By seldo
JavaScript: Who, Where, What, Why and Next
- 4,328