Super Full Stack Web Developer in Modern Expectation
Short guide for every curious developers
The rapid growing phase of many tech startups currently affecting a lot of people to build an application that can be built as a business. Things like commerce, SaaS, social media, ride-sharing, B2B, communication, game, media, and so much more. Because of that, likewise the high rising of demand for people who can actualize that application technically: developer.
de·vel·op·er (n) a person who develops something technical.
Developer who can build application or website?
Correct. Thank you for your understanding. Yes, we’re not talking about the property developer.
Title or even career of developer that have an important role in appplication development is ranging wide, from software to hardware. But let’s just focus on the software here:
- Web Developer
- Frontend Developer
- Backend Developer
- Full-Stack Web Developer
- Desktop App Developer
- Mobile Developer (Android or iOS)
- Software Engineer
- Software Architect
- DevOps (although this isn’t a job title)
For this guide, we focus only on Full-Stack Web Developer.
So, for founder or recruiter, if you need a developer, please be more specific. What kind of developer you need? Okay?
About a year ago, I was constructing a table or a spreadsheet about end-to-end guide to see what is takes to build a real web-enabled product. The initial purpose was built as a catalog for training and coaching, that summarizes various foundation or fundamental that needed to build modern web app as a software product. The original table was deprecated, and then moved to this Airtable base 🔗. In there, you can look the most substantial part, which are the “Technical” and “Operation”. My! Please be aware that requirements are for software product, not just a software project or ordinary website. But looking it now, it’s not even complete yet, my friends.
Because of that, we need to aware that the needs to become a true full-stack web developer in today’s world, are more and more complex. Related to that, let’s illustrate the landscape and expectation that currently already common.
There are several basic categories that special and obligated to be understood by a true full-stack web developer:
- Technology and Business Landscape with Logic
- Software Development, Design, Architecture, and Infrastructure
- Web Development (including Frontend/Client, Backend/Server, API)
- Data and Database (including SQL and NoSQL)
- Platform, Library, and Framework (including *aaS)
- Automation, Testing, and Integration (including QA/QC)
- Deployment, Delivery, and Maintenance
- System Administration, Network, and Configuration
So, it’s beyond just frontend and backend.
That much layer?
Not always, but I haven’t found the standard.
In other discussion, there are other opinions…
Being a Full Stack Developer — SitePoint 🔗
- Client or Frontend (Browser or Mobile) including design
- Server or Backend
- Web Development Tools
- Web Server and Database
- Operating System including System Administration
What is a Full-Stack Developer? — Codeup 🔗
- Server, network, and hosting environment
- Relational and nonrelational databases
- How to interact with APIs and the external world
- User interface and user experience
- Quality assurance and control
- Security concerns throughout the program
- Understanding customer and business needs
What is a Full Stack developer? — Laurence 🔗
- Server, Network, and Hosting Environment
- Data Modeling
- Business Logic
- API layer / Action Layer / MVC
- User Interface
- User Experience
- Understanding what the customer and the business need
Let your imagination and ideas come free!
For full-stack web developer, all of those categories are required to know. Even more if you want to be a dev warriors in a startup. You need to know and understand all of those topics to bring your startup alive and run smoothly.
That’s it?
Yeah, so you can survive.
Okay, let’s spell out in more details, what are the things that essential to be known by a true modern full-stack web developer. At least, you have awareness, don’t have to master them all. Including all of the terminologies and names that good to know, based on popularity as well. We’ll skip every explanation for each points about what, why, how, and other nitty-gritty details. Beside, we have access to a search engine!
Based on popularity rating and in an unordered fashion, here they are, the most overwhelming tech stack we must aware of.
Prepare yourself.
Operating Systems and Platforms:
- GNU/Linux (Debian, Ubuntu, CentOS, CoreOS, Arch, etc)
- macOS
- Windows 7, 8, 10
- Android and Android Wear
- iOS and watchOS
- Fuchsia (yet to know)
Tools and Utilities:
- Terminal, CLI, Shell, and scripting: bash, zsh, fish, any Linux terminal (Gnome, Terminator), iTerm, HyperTerm, PowerShell, SSH, PGP key, and almost all useful POSIX-compliant utilities.
- Package manager: Homebrew, apt-get, rpm, nvm, npm, Bower, JSPM, pyenv, rbenv, rvm, apm, etc
- Shell framework: prezto, oh-my-zsh, etc
- Version Control System: Git, Subversion (SVN), GitHub, Bitbucket, GitLab, SourceTree, Tower, P4Merge, DiffMerge, etc
- Versioning: Generic software release life cycle (alpha/beta), Semantic Versioning
Computer and Software Science, Logic, Process, Flow, Paradigm, Pattern, Architecture, API, Standard:
- Number System: binary, octal, decimal, hexadecimal, etc
- Common Data Structure and Types: char, string, number, integer, float, array, stack, queue, linked list, binary tree, matrix, graph, etc
- Algorithm, Pseudocode, Complexity (Big O): sorting, searching, filtering, clustering, etc
- Flowchart and Data Design: basic/common symbols and shapes, data flow diagram (DFD), Unified Modeling Language (UML), etc
- Programming Paradigm: Imperative, Procedural, Object Oriented, Functional, Concurrent, etc
- Design Pattern: creational, structural, and behavioural by Gang of Four, etc
- Architectural Pattern: coupling and cohesion, plugin and extension, modules and packages, MV* (MVC, MVP, MVVM, etc), real-time, polling, Publish-Subscribe, Modular, Monolith, web service (WSDL, SOAP, REST, GraphQL/Apollo/Graph.cool, SOA, Microservices, etc), etc. Wow so many etcs!
- Techniques: Refactoring, Modularization, Normalization, etc
- Pattern Matching: Search Pattern, Regular Expression (regex), etc
- Protocol: Internet Protocol (IP), HTTP, HTTPS (SSL/TLS), RPC, WebSocket, ws, Socket.IO+Engine.IO, Primus, SockJS, WebRTC, DDP, Faye, WAMP Protocol, Autobahn.ws, Crossbar.io, ShareDB, etc
- Characteristic: sequential, serial, concurrent, parallel, synchronous/asynchronous, async/await, etc
- Standard Organization, Foundation, and Documents: IETF and RFC, Linux Foundation, JS Foundation, Ecma International, W3C, etc
- API: plain specification, API Blueprint, Apiary, Mashape+Kong+Gelato+Galileo, OpenAPI/Swagger, RAML, API Workbench, apiDoc, cURL, Postman, Insomnia, etc
- Authentication, and Authorization: Session, JWT, OAuth 1 & 2, LocalStorage, Cookie, etc
- Others: Operational Transformation (OT)
Concepts, Principles, Processes, and Techniques of Web/Application/Software Development, Design, Management:
- Classic: Waterfall, Spiral, Prototyping, Incremental, Rapid, etc
- Modern: Extreme Programming (XP), Six Sigma, Agile (Scrum and Kanban), Lean, Minimal, Design Sprint, Design Thinking, Pair Programming, etc
- Testing: Unit Testing, Integration Testing, End-to-End Testing (E2E), Test-Driven Development (TDD), User Acceptance Testing (UAT), Behavior-Driven Development (BDD), Acceptance Test-Driven Development (ATDD), A/B Testing, etc
- Process: Development-Staging-Production, Refactoring, Pragmatic, Don’t Repeat Yourself (DRY), GitFlow, etc
- Organization: Flat, Holacracy, etc
Code Editors, Environments, Extensions:
- Code: Vim, Emacs, Notepad++, Atom, Sublime, Visual Studio Code, Brackets, Coda, TextMate, Light Table, etc
- IDE: Xcode, WebStorm, PhpStorm, RubyMine, PyCharm, IntelliJ, Eclipse, Netbeans, etc
- Formatter: Prettier
User Designs, Interfaces, Experiences:
- Layout: Adaptive and Responsive Web Design, Flex box, Grid, etc
- Language and Brand: Internationalization (i18n) and Localization (l10n)
- Web-related: CSS3, SVG, Canvas, WebGL
- Others: Accessibility (a11y) and Usability (u7y)
Markup, Styling, Languages, Platforms, Libraries, Frameworks, Scaffolding, Extensions:
- HTML: XML, DOM, Jade/Pug, EJS, Handlebars.js, Dust.js, mustache, ECT, Nunjucks, Haml, etc
- CSS: Less, Stylus, Sass, Compass, PostCSS, Autoprefixer, etc
- Components: Bootstrap, Foundation, Pure, Semantic UI, Tachyons, Glamor, BaseCSS, UIKit, Kendo UI, Ink Interface Kit, Formstone, Base, etc
- Grid: Jeet, Bourbon Neat, LostGrid, Susy, Flexible Grid, Gridy, Flint, Gridset, CEDVEL, etc
- Kit: Google Web Starter Kit, Boilerplate, Skeleton, etc
- JavaScript, Node.js and Deno (including its flavors, styles, and techniques): ES6/ECMAScript 2015, Babel, async/await, stream/pipe, Promise, Generators, Thunk), JSON/JSON-LD/BSON/MSON, xhr/Ajax/AJAX, CoffeeScript, TypeScript, NativeScript, JerryScript, Dart, jQuery, Zepto.js, Express, Feathers, Koa, Hapi.js, Loopback, Hoodie, Geddy, Angular.js, Backbone.js, Marionette.js, Ember.js, Knockout.js, Polymer, React.js and React Native (+Refetch, Aphrodite, create-react-app), Vue.js (+Vuex), Riot, Cycle.js, Fluxible.io, choo.js, Meteor, donejs, MERN, MEAN, Derby, Sails, Aurelia, Durandal, Adonis, Deku, Webix, Apostrophe, KeystoneJS, Grav, Lodash/Underscore, Gulp, Grunt, Brunch, Broccoli.js, Mimosa, Webpack, Buck, Browserify, Rollup, SystemJS, Closure Compiler, Yeoman, Slush, Mega Boilerplate, Hackathon Starter, SuperAgent, State Management (Flux, Redux, Reflux, Relay, RxJS/ngrx/Falcor, Alt.js, MobX, Radium, NuclearJS, Cerebral, FlowType, ImmutableJS/Baobab), Ionic, Xamarin, PhoneGap, Cordova, Appcelerator Titanium, Fusetools, Sencha/ExtJS, ExponentJS, etc
- PHP, Code Igniter, Laravel, Yii, Zend, CakePHP, Symfony, Wordpress, etc
- Ruby, Rails, Sinatra, Lotus, Volt, RubyMotion, etc
- Python, Django, Flask, Skulpt, etc
- C, Makefile, etc
- C++, Crow, Silicon, CppCMS, TreeFrog, etc
- C#, .NET, SignalR, etc
- Java, Play, Spark, Ninja, Weex, Android, etc
- Scala
- Clojure, ClojureScript, Luminus, Om.js, etc
- Swift, Vapor, Kitura, Perfect, Swifton, etc
- Go, Revel, Beego, Martini, etc
- Perl, Mojolicious, Catalyst, etc
- Lua, Luvit, etc
- Elixir, Phoenix, etc
- Elm
- Opa
- WebAssembly (wasm)
- Others: Serverless, Apex
- Static Site Generators: Jekyll, Middleman, Hexo, DocPad, Nanoc, Harp, assemble, Gatsby, Hugo, Pelican, Hyde, etc
- for documentation purposes: Markdown, reStructuredText, Rich Text Format (RTF), apiDoc
- for watching, testing, and coverage purposes: Browsersync, Watchman, TAP, Tape, Mocha, Chai, Sinon, Jasmine, Karma, Intern, Ava, Jest, Enzyme, Protactor, Gherkin/Cucumber, QUnit, JUnit, SuperTest, Selenium, Nightwatch, PhantomJS, CasperJS, Nightmare, Cypress.io, LABjs, Chimp.js, Wallaby.js, JSVerify, testdouble.js, gremlins.js, Appium, SauceLabs, Istanbul, Coveralls, etc
- for configuration purposes: editorconfig, YAML, etc
- for hinting/linting purposes: StandardJS, ESLint, JSCS, JSHint, coffeelint, etc
- for character set/encoding purposes: Unicode, UTF, ASCII, jsontool, prettyjson
- for learning purposes: NodeSchool Workshopper
Database, Search, Queue:
- SQL: MySQL, MariaDB, PostgreSQL, Oracle, etc
- Document: MongoDB, PouchDB, Couchbase, CouchDB, RethinkDB, Realm, etc
- Key value: Redis, Riak, MemcacheDB, Aerospike, etc
- Graph: Neo4J, Allegro, Objectivity
- Column: Cassandra
- Multiple: FoundationDB
- Search: Elasticsearch, Solr, etc
- Analysis and Visualizer: Elastic Stack (Elasticsearch, Logstash, Kibana)
- Queue: ActiveMQ, RabbitMQ, ZeroMQ, Celery, Kue, bee-queue, bull, etc
- Big Data: Hadoop, HBase, etc
- API-designed: Horizon, Firebase, Lovefield, Breeze.js/Breeze#, Kinto, Deployd, Simperium, Parse, etc
- ORM and ODM: Sequelize, Bookshelf, Mongoose, Mongorito, Thinky, etc
- GUI Manager: MySQL Workbench, pgAdmin, Medis, Robomongo
Processes, Environments, Network, Server, Deployment, Infrastructure, and Orchestration:
- Process: daemons, systemd/systemctl, launchctl, lunchy, Monit, etc
- Server: Nginx (+OpenResty), Apache, etc
- Process Manager: PM2, Phusion Passenger, etc
- VPS: Digital Ocean, Linode, etc
- PaaS: Heroku, OpenShift
- IaaS: Amazon Web Services (AWS) and Amazon EC2, Cisco Metapod, Microsoft Azure Cloud Services, Google Compute Engine (GCE), Joyent
- Cloud Storage: Amazon S3, Google Cloud Storage, Azure Storage
- Cloud Messaging: Firebase Cloud Messaging, Mailgun, Lob, SendGrid, Postmark, Mandrill
- Continuous Integration (CI): Jenkins, Travis, Drone.io, Strider, etc
- Continuous Delivery (CD): GoCD, Snap CI, Codeship, CloudBees, etc
- Containerization: Docker, Dokku, Panamax, rkt, Kubernetes, etc
- Data Stream: PubNub
- Job Processing: Iron.io
- Virtualization: Vagrant, VirtualBox, VMWare
- Virtual Private Network (VPN)
- Sandbox Environment: Runnable, Sandstorm, CodeSandbox, Glitch
Assurance, Control, Analytics, Tracking, Monitoring, Reporting for Quality, Performance, and Data:
- Generic: Google Analytics, GoSquared, Heap Analytics, Mixpanel, Piwik, Keen IO, Clicky, Mode Analytics, Kadira, etc
- Tracking: TrackJS, Bugsnag
- Logging: Sentry.io, Loggly
- All in One: Segment.io, New Relic
Domain, Domain Name System (DNS), Security:
- Registrar: Uniregistry, Name.com, NameCheap, Gandi.net, etc
- DNS: CloudFlare, OpenDNS, DNSimple, etc
- Encryption and Hashing: bcrypt, AES, SHA-256, MD5, etc
Account, Social, Messaging, Chat Platform:
- Google+, Twitter, Facebook, App.net, etc
- Slack, HipChat, Gitter, Discord, Franz, etc
- Single Sign-On (SSO), Lightweight Directory Access Protocol (LDAP), etc
Sites, Productivity Tools, and Other Services:
- Sites: Google, DuckDuckGo, Stack Overflow families, etc
- Files: Google Drive, Docs, Sheets, Slides, Dropbox, etc
- Management: Trello, Asana, Airtable, ZenHub, Waffle.io, etc
- Documentation: man, Zeal, Dash, etc
- Keyboard: Vimium, Alfred, Synapse, Launchy (RIP), etc
- Workflow: IFTTT, Zapier, etc
- Mailing: MailChimp, Constant Contact, etc
- Imaging: ImageMagick, JPEGmini, nomacs, etc
- Multimedia: FFmpeg, VLC, mpv, etc
- Monitor: f.lux
- Password: Bitwarden, Enpass, etc
- Payment: Stripe, Interledger, etc
- Web Traffic: SumoMe
- Emoji: International/Apple, Google, Twitter, Facebook, Emoji One, etc
More and more things for the future!
- Automation and Bot
- Data Visualization
- Internet of Things and Smart Home
- Augmented Reality
- Virtual Reality
- Artificial Intelligence
- Machine Learning
- Blockchain and Distributed System
- Cryptocurrency
- Unmanned Aerial Vehicle (UAV) or Drone
- Self-Driving Vehicle
That’s so much! Overwhelming! What a laundry list!
Yup maybe I’m exaggerating. haha. Well, to be clear, that’s the landscape, variant, and even ecosystem that are taking shape around modern full-stack web development (during 2000–2017). At least, some parts of those technologies are recognized by you, learn the pros and cons of them. Concerning the when and how to use it, sure enough it depends on the situation and condition of the project, product, or service that want to be built. Consult to the experts if you want it easier to digest.
So we need to be an Iron Man?
Yes and no. Jack of all trades, master of at least one.
Yeah, at least we have to choose one or more things to master. Indeed, it’s hard. Especially when you have to deal with a single technologist position in an early-stage team or startup. That’s cool, that’s why we have friends and communities. But if you already have a great team, then being Hulk or Thor is sufficient enough.
Need more? There is a list of recommended apps that I’ve been curating over the time in this Airtable base 🔗. Check it out. 🌟
There’s even this good visualization 🔗, in modest way:
Well, that’s the expectation. Along the time in modern times, clearly more and more things coming up. For more references, please check out various inspiring insights here:
- (2016/2017) Must-Know Web Development Tech: Watch this if you want to be a web developer — YouTube video by LearnCode.academy 🔗
- (2015) Watch This If You Want to Become a Web Developer!: Web Development Career advice — YouTube video by LearnCode.academy 🔗
- (2014) Watch This If You Want to Become a Web Developer!: Web Development Career advice — YouTube video by LearnCode.academy 🔗
- (2014) The Dev Technology Landscape, by DevNetwork 🔗
- The State of JavaScript Developer Survey 🔗
- What should a fullstack developer know in 2016? — Quora 🔗
- DevOps Bookmarks 🔗
If this story is useful, click ♡ Recommend so that others know. You can ▢ Bookmark this for future reading.
Visit my website: mhaidarhanif.com 🔗
Thank you for reading!