6 ms·

Show HN: An illustration of Web Developer tools in 2018

130 points by kamranahmed_se 9y ago

EnderMB 9y ago
Looks like a nice overview, although it's a shame to see very little on the .NET/C# front.
partycoder 9y ago
The graphic work is good, but the hierarchies are inconsistent and need more work. This map is vast but it has a lot of important gaps. Some other things are just inaccurate. e.g: github required for any path. You could use gitlab, bitbucket, gerrit... plenty of good solutions out there.
fiatjaf 9y ago
Very nice. I disagree on a lot of things, but who cares.
- sydd 9y ago
  Yeah, especially the backend part. Java is 1 node while PHP is 15? No mention of any functional language?
  - Tehnix 9y ago
    Probably reflects the ones the author has most used, I mean, I wouldn't start recommending stuff I've never touched either. I imagine PRs could fill out more, like e.g. adding Haskell, Erlang etc etc.
  - itgoon 9y ago
    The intent seems to be "how to get a job in this area", not a comprehensive map of everything out there. It's pretty messy, as it is.
  - itronitron 9y ago
    This seems to be intended as a tree of achievements gained in the process of developing web, rather than a guide for what to use for any particular instance. Several of the paths I have happily skipped. The backend could be further broken down into separate parts, each potentially using a different language, in order to give a clearer picture of the options and complexity. 1) web server (request/response), 2) search 3) database/store/access 4) data pipeline/ETL 5) payments
lxe 9y ago
Awesome work. Don't forget https://flow.org/ https://flow.org/ (is it "flow" or "flowtype" ?) on the JS depth track.
- rwbcxrz 9y ago
  As I understand it, Flow is to Go as flowtype is to golang. The project should be referred to as Flow in prose, while flowtype is primarily a tag/keyword for searchability.
bsenftner 9y ago
What a cluster fuck. By year's end, I wonder how many of these will still be in use.
- connorelsea 9y ago
  Most of the projects I saw listed have been in use for multiple years already
tretiy3 9y ago
found a lot of well known words. in every branch. worth the star.
mister_popo 9y ago
i would put docker swarm in grey and kubernetes in yellow..
Karupan 9y ago
Great work putting this together! Reminds me that being a developer these days is a lot of work with the insane number of tools and frameworks one is expected to know.
- ams6110 9y ago
  Yes, there are an almost intimidating number, but any individual developer will only know a small fraction of these technologies in any great depth.
delinka 9y ago
"If you think any of the roadmaps can be improved, please do open a PR ..." While I appreciate the sentiment, truly fixing these roadmaps is an industry-wide problem. ;-)
- deleted 9y ago
  [deleted]
wiremine 9y ago
This is great! Like other commenters, I disagree with some things, but you can tell a lot of thought and attention went into this. Thank you! As an aside: it makes me wish there was an easy way to "fork" diagrams like this, and see what others might come up with.
- smcnally 9y ago
  balsamiq project files are https://github.com/kamranahmedse/developer-roadmap/tree/master/project-files https://github.com/kamranahmedse/developer-roadmap/tree/mast... Contribution info https://github.com/kamranahmedse/developer-roadmap/blob/master/README.md#-contribution https://github.com/kamranahmedse/developer-roadmap/blob/mast...
  - wiremine 9y ago
    Awesome, thanks!
j1elo 9y ago
Awesome graphs! One nitpick: egrep and fgrep are deprecated since a while ago, plus no need to mention them if bare grep is already in the list
indescions_2018 9y ago
You could also add WebGL frameworks on the front end: ThreeJS, BabylonJS, PlayCanvas, P5.js, Sketchfab, AFrame, REGL, Unity.
- crispinb 9y ago
  An aside: what would be a good one to try? My purpose: helping kids (10+) rewrite their Scratch games for the web. So something with a nice clean API for pushing sprites around.
  - bcjordan 9y ago
    I would check out p5.play: http://p5play.molleindustria.org/ http://p5play.molleindustria.org/ It is a simplified API for p5.js, and very quick to get up and running with. You might also find code.org's Game Lab a useful environment, which is p5.play based, has a sprite editor built in, and has both block based & text based editing support: https://code.org/educate/gamelab https://code.org/educate/gamelab
    - crispinb 9y ago
      Thanks, I've just had a look at both & they look like great suggestions. I had passed over code.org before, assuming (often an error!) it to be a Scratch clone, but actually it seems like a really useful resource.
tebura 9y ago
Cool
mrep 9y ago
Vim/nano and NO EMACS! Joking aside (I'm actually a vimmer ;), is there any use case for aiohttp if you are using django since django now offers channels? PS, please don't start a flamewar, they are both good.
cher14 9y ago
I remade this great graph using breakdown-notes so you can have all of the graph on one screen and zoom in or out, make alterations for yourself. You can find it here: https://www.breakdown-notes.com/makemap/load/kamranahmedse https://www.breakdown-notes.com/makemap/load/kamranahmedse
memco 9y ago
Pretty expansive. Might be fun to see a gamified version where you could compare your own personal skill competency with your friends & coworkers.
superasn 9y ago
I guess it doesn't fit the theme but for indie developers there is an equally important roadmap called the marketing roadmap or getting your product out there roadmap which consists of seo, email marketing, side project marketing, blogging, contenting marketing, etc which is even more complex than this and 1000 times more important than any web development you will ever do.
- iovrthoughtthis 9y ago
  So... shall we build that roadmap too?
  - exceptione 9y ago
    I would be very interested. Are there any people here who can pull this off?
    - karlhughes 9y ago
      Something like this? https://www.sideprojectchecklist.com/marketing-checklist/ https://www.sideprojectchecklist.com/marketing-checklist/
rf15 9y ago
This seems to be missing WebGL and WASM as branches further down the frontend tree.
LeanderK 9y ago
All the tools seem to mostly concern web-apps (something interactive). I have to build a essentially static website, what are my options? I am a bit out of the loop, but the appearance of the website is a bit unusual so using just a template is not possible. Should I still use a framework or just code it in raw html? If raw html is an option, how can i reuse stuff (for example hamburger menu on mobile)?
- bartedinburgh 9y ago
  Check out static website generators like Jekyll (https://jekyllrb.com https://jekyllrb.com). If that doesn't meet your needs, you can still use the same tools as for a bigger webapp e.g. Node + React + Bootstrap/Materialize. A CSS framework like Bootstrap (https://getbootstrap.com https://getbootstrap.com) will provide you with some easy to use components.
  - LeanderK 9y ago
    thank you, Jekyll probably won't suffice. What is the better option for a custom look? The style of the buttoms etc. is custom and not based on material design or any other (and also the main focus of the website). I can't share it the mockups publicly, unfortunatly.
    - nicoburns 9y ago
      Jekyll (and other similar projects like Hugo) will let you do custom styles. You have to write your own theme, but this is just HTML+CSS with a bit of templating. Far larger projects I would recommend using a CSS framework such as inuit.css with SASS, but for smaller projects you can get away with plain CSS. Your other option is to use something like Laravel or Rails or Express, and just do server-side rendering. A lot of people are still doing this, and it's still well supported. The advantage of the static site generators is much better performance / lower resource usage, at the cost of flexibility.
- connorelsea 9y ago
  Stuff like gatsby gives you best of both worlds. Reusable component based app paradigms + extremely fast static asset serving. https://www.gatsbyjs.org/ https://www.gatsbyjs.org/

Looks like a nice overview, although it's a shame to see very little on the .NET/C# front.

The graphic work is good, but the hierarchies are inconsistent and need more work. This map is vast but it has a lot of important gaps. Some other things are just inaccurate. e.g: github required for any path. You could use gitlab, bitbucket, gerrit... plenty of good solutions out there.

fiatjaf 9y ago

Very nice. I disagree on a lot of things, but who cares.

sydd 9y ago
Yeah, especially the backend part. Java is 1 node while PHP is 15? No mention of any functional language?
- Tehnix 9y ago
  Probably reflects the ones the author has most used, I mean, I wouldn't start recommending stuff I've never touched either. I imagine PRs could fill out more, like e.g. adding Haskell, Erlang etc etc.
- itgoon 9y ago
  The intent seems to be "how to get a job in this area", not a comprehensive map of everything out there. It's pretty messy, as it is.
- itronitron 9y ago
  This seems to be intended as a tree of achievements gained in the process of developing web, rather than a guide for what to use for any particular instance. Several of the paths I have happily skipped. The backend could be further broken down into separate parts, each potentially using a different language, in order to give a clearer picture of the options and complexity. 1) web server (request/response), 2) search 3) database/store/access 4) data pipeline/ETL 5) payments

lxe 9y ago

Awesome work. Don't forget https://flow.org/ https://flow.org/ (is it "flow" or "flowtype" ?) on the JS depth track.

rwbcxrz 9y ago
As I understand it, Flow is to Go as flowtype is to golang. The project should be referred to as Flow in prose, while flowtype is primarily a tag/keyword for searchability.

bsenftner 9y ago

What a cluster fuck. By year's end, I wonder how many of these will still be in use.

connorelsea 9y ago
Most of the projects I saw listed have been in use for multiple years already

tretiy3 9y ago

found a lot of well known words. in every branch. worth the star.

mister_popo 9y ago

i would put docker swarm in grey and kubernetes in yellow..

Karupan 9y ago

Great work putting this together! Reminds me that being a developer these days is a lot of work with the insane number of tools and frameworks one is expected to know.

ams6110 9y ago
Yes, there are an almost intimidating number, but any individual developer will only know a small fraction of these technologies in any great depth.

delinka 9y ago

"If you think any of the roadmaps can be improved, please do open a PR ..." While I appreciate the sentiment, truly fixing these roadmaps is an industry-wide problem. ;-)

deleted 9y ago
[deleted]

wiremine 9y ago

This is great! Like other commenters, I disagree with some things, but you can tell a lot of thought and attention went into this. Thank you! As an aside: it makes me wish there was an easy way to "fork" diagrams like this, and see what others might come up with.

smcnally 9y ago
balsamiq project files are https://github.com/kamranahmedse/developer-roadmap/tree/master/project-files https://github.com/kamranahmedse/developer-roadmap/tree/mast... Contribution info https://github.com/kamranahmedse/developer-roadmap/blob/master/README.md#-contribution https://github.com/kamranahmedse/developer-roadmap/blob/mast...
- wiremine 9y ago
  Awesome, thanks!

j1elo 9y ago

Awesome graphs! One nitpick: egrep and fgrep are deprecated since a while ago, plus no need to mention them if bare grep is already in the list

indescions_2018 9y ago

You could also add WebGL frameworks on the front end: ThreeJS, BabylonJS, PlayCanvas, P5.js, Sketchfab, AFrame, REGL, Unity.

crispinb 9y ago
An aside: what would be a good one to try? My purpose: helping kids (10+) rewrite their Scratch games for the web. So something with a nice clean API for pushing sprites around.
- bcjordan 9y ago
  I would check out p5.play: http://p5play.molleindustria.org/ http://p5play.molleindustria.org/ It is a simplified API for p5.js, and very quick to get up and running with. You might also find code.org's Game Lab a useful environment, which is p5.play based, has a sprite editor built in, and has both block based & text based editing support: https://code.org/educate/gamelab https://code.org/educate/gamelab
  - crispinb 9y ago
    Thanks, I've just had a look at both & they look like great suggestions. I had passed over code.org before, assuming (often an error!) it to be a Scratch clone, but actually it seems like a really useful resource.

tebura 9y ago

Cool

mrep 9y ago

Vim/nano and NO EMACS! Joking aside (I'm actually a vimmer ;), is there any use case for aiohttp if you are using django since django now offers channels? PS, please don't start a flamewar, they are both good.

cher14 9y ago

I remade this great graph using breakdown-notes so you can have all of the graph on one screen and zoom in or out, make alterations for yourself. You can find it here: https://www.breakdown-notes.com/makemap/load/kamranahmedse https://www.breakdown-notes.com/makemap/load/kamranahmedse

memco 9y ago

Pretty expansive. Might be fun to see a gamified version where you could compare your own personal skill competency with your friends & coworkers.

superasn 9y ago

I guess it doesn't fit the theme but for indie developers there is an equally important roadmap called the marketing roadmap or getting your product out there roadmap which consists of seo, email marketing, side project marketing, blogging, contenting marketing, etc which is even more complex than this and 1000 times more important than any web development you will ever do.

iovrthoughtthis 9y ago
So... shall we build that roadmap too?
- exceptione 9y ago
  I would be very interested. Are there any people here who can pull this off?
  - karlhughes 9y ago
    Something like this? https://www.sideprojectchecklist.com/marketing-checklist/ https://www.sideprojectchecklist.com/marketing-checklist/

rf15 9y ago

This seems to be missing WebGL and WASM as branches further down the frontend tree.

LeanderK 9y ago

All the tools seem to mostly concern web-apps (something interactive). I have to build a essentially static website, what are my options? I am a bit out of the loop, but the appearance of the website is a bit unusual so using just a template is not possible. Should I still use a framework or just code it in raw html? If raw html is an option, how can i reuse stuff (for example hamburger menu on mobile)?

bartedinburgh 9y ago
Check out static website generators like Jekyll (https://jekyllrb.com https://jekyllrb.com). If that doesn't meet your needs, you can still use the same tools as for a bigger webapp e.g. Node + React + Bootstrap/Materialize. A CSS framework like Bootstrap (https://getbootstrap.com https://getbootstrap.com) will provide you with some easy to use components.
- LeanderK 9y ago
  thank you, Jekyll probably won't suffice. What is the better option for a custom look? The style of the buttoms etc. is custom and not based on material design or any other (and also the main focus of the website). I can't share it the mockups publicly, unfortunatly.
  - nicoburns 9y ago
    Jekyll (and other similar projects like Hugo) will let you do custom styles. You have to write your own theme, but this is just HTML+CSS with a bit of templating. Far larger projects I would recommend using a CSS framework such as inuit.css with SASS, but for smaller projects you can get away with plain CSS. Your other option is to use something like Laravel or Rails or Express, and just do server-side rendering. A lot of people are still doing this, and it's still well supported. The advantage of the static site generators is much better performance / lower resource usage, at the cost of flexibility.
connorelsea 9y ago
Stuff like gatsby gives you best of both worlds. Reusable component based app paradigms + extremely fast static asset serving. https://www.gatsbyjs.org/ https://www.gatsbyjs.org/