Ask HN: What does modern front-end web development look like? | Hacker News Reader

Ask HN: What does modern front-end web development look like?

22 pointsFr0styMatt18 comments

I'm curious; what is the modern development process for creating the front end of a web app look like?

Are there drag-and-drop WYSIWYG editors for Web 2.0-style UIs? Do people ever touch raw HTML these days? What's some good starter (preferably project-based) learning material out there? Are the courses offered by Treehouse any good?

I'm coming from an app and games developer background, so while I'm well-versed in native development I have only a very vague understanding of what the web stack looks like.

View on HN

A modern front-end stack looks like:

For structure/content: raw HTML, or less commonly a language that compiles to HTML (Haml, Jade, etc.).

If the HTML is being rendered and served from the backend, you might use a templating language like Django's templating or Jinja (Haml and Jade also have these features).

If you are creating an application that does a lot of AJAX, you will also often use a JavaScript templating system like Handlebars.

For styling: raw CSS, or fairly commonly a CSS pre-processor like SASS, Less, or Stylus. Very often you will use a CSS framework like Bootstrap or Foundation to give you pre-made forms, buttons, grids, and other essentials.

For logic/interaction: JavaScript. Many people will also use compile-to-JS languages like CoffeeScript, TypeScript, or ClojureScript (in decreasing order of frequency). There are a lot of libraries/frameworks that can be used here. Most commonly you'll use jQuery and jQuery UI widgets. For more complex applications, single page app frameworks like Backbone, Angular, or React come into play.

Build process: For more complex projects, build tools like Grunt or Gulp to watch for changes to the filesystem and re-compile files (typically when you're using CoffeeScript or a CSS preprocessor), to package everything for deployment (minifying JavaScript, etc), and to run tests.

Packaging: Often you'll use a tool to keep track of modules/packages. These tools are quite different. Bower, RequireJS, Browserify, Component, and other tools occupy this space.

Often you'll use Node's npm to keep track of build process and testing packages!

Testing: For testing you'll often see frameworks like Jasmine or Mocha/Chai for unit tests/integration tests. For end-to-end tests you might see things like Selenium (run tests in a browser window). There are also test-runner frameworks like Karma.

Debugging: Chrome's developer tools (or Firebug/Firefox/Safari).

For someone starting out this is probably overwhelming. The important things to realize are that:

1) No one uses all these tools

2) Most of these tools are only useful for large complex codebases with large teams.

2) The most common stack is raw HTML, raw CSS, raw JS, jQuery, jQuery UI, Bootstrap, no build process, no packaging, no testing.

Thanks for this post

There are projects using all these tools. The initial onboarding learning curve is more of a cliff. The results are pretty smooth.

thanks for the reply. I also needed this.

Not many developers that I know of use WYSIWYG editors. Most is done by hand, at least in my world of web development. Haven't taken the courses by Treehouse but I've heard good things. I'd recommend looking into a good JavaScript framework like Facebook's React, Google's AngularJS or Backbone.

If you really like strongly typed languages, and want to try out a new platform, check out Google Dart.

Development Tools

1. An HTML/CSS editor (FireBug for FireFox)

2. Network Traffic Monitor (Foxmeter for Firefox)

3. Cookie Manager (Advanced Cookie Manager)

4. User Agent Switcher (for Firefox)

5. Modify Headers (optional)

6. Javascript Console

Those are your tools for debugging, writing some things.

Technologies you will have to learn...

1. jQuery

2. MVC framework

3. API/JSON content calls

4. AJAX

5. Cookies (same/cross domain)

I recommend trying out Chrome and Chrome developer tools. Very robust without a bunch of third party add-ons.

To add to your list jsfiddle.net is a great tool for testing out small features and experimentation.

HTML & CSS were developed to abstract documents and present them through a web browser.

You'd be better served making a native app that integrates with a RESTful web api on the backend.

You still get the reach that the web provides, while having access to all the presentation and graphics goodies you get in a native app environment.

I think the most important part of modern web developement are frameworks:

JS frameworks: jQuery, AngularJS, BackboneJS

CSS frameworks: Bootstrap, Foundation

and tons ready-to-use solutions on Github.

Thanks everyone for the suggestions. I'm starting out by working through some stuff on TreeHouse and then will go from there. Looks like it's going to be a great adventure!

No WYSIWYG. Virtually all raw HTML.

Treehouse was decent when it launched, and I imagine it's improved a solid amount by now.

If you're coming from a development background, you'll do fine.

If you're building true front-end apps, you're going to want to look at Angular or Node.

If the back-end does the heavy lifting, they become less important.

> How do you use node for front-end? I've only ever seen it used for back-end.

One way is to build an app which the client runs on his/her machine and then accesses an interface via the browser. I played around with that some in this project here: https://github.com/JohnMunsch/selfhelp

> If you're building true front-end apps, you're going to want to look at Angular or Node.

Node is a non-browser run time for JavaScript. Node has nothing to do with front-end apps.

Why is WYSIWYG not used? Is it just that the available tools aren't good?

I would have thought that writing raw HTML would be a bit like writing raw WinForms code these days, or writing XAML by hand instead of using the forms designer.

Note that's the narrow application of visual editors I'm thinking of here - laying out buttons, binding events to buttons, binding data to elements, etc; not the "create a pretty looking page and have it spit out horrible HTML" type stuff.

You can use WYSIWYG editors but make sure that they comply with latest HTML and CSS specifications, so that when you want to manually modify the code, you will find yourself in a well structured framework and not in a jungle of incoherent code.

If you want to go WYSIWYG, I think Dreamweaver is keeping up fine with times and it's still one of the most complete tools https://www.adobe.com/products/dreamweaver.html

But these days thanks to the evolution of the web itself, a lot of modern online tools are coming out. For example check the power of https://webflow.com/ I believe that being these new tools "indier" and lighter, they have the chance to keep up faster with the new technologies and best practices of web design!

Of course the best is - before using these tools - knowing about what the best practices (in terms of code) those tools are implementing (if they are) in their rendered code. For example you should learn about how much Twitter Bootstrap [http://getbootstrap.com/] simplified layout design for web for since a couple of years now, and then maybe you will recognize those tools using it in the code they generate, and then you'll feel you can take over by yourself and further change things at your need. Another example is jQuery.

Also, in my opinion, some kind of new fundamental learning/building facilities these days are "developer tools" that come with browsers (Firefox and Chrome). For example check https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto... You don't know how much you can learn from using them!

But, If you want to get to know even more, and start a journey in a path of learning nothing worked more for me as than this little big interconnected learning path: http://www.bentobox.io/

Hope I updated you a bit with times, good luck! :)

And.. what a timing: https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/

Most WYSIWYG stuff I've used (long ago, mind you) was quickly not granular enough to be worthwhile. Very often I'll be working with HTML that is any of these:

- initially hidden

- meant to be rendered as part of a larger whole

- needs to be a specific element, have a specific structure, have a specific ID / class

- contains serverside code / include that renders additional HTML

- is actually a domain template language such as Mustache or Smarty that the tool may not understand

- is greatly changed by CSS (which may itself need to be compiled, such as in the case of LESS or SASS)

WYSIWYG tools usually can't grok the context of cases like that and if you try to use them, they end up taking more time than it would to simply write out the HTML oneself.

Reply on news.ycombinator.com