

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

I&#x27;m curious; what is the modern development process for creating the front end of a web app look like?<p>Are there drag-and-drop WYSIWYG editors for Web 2.0-style UIs? Do people ever touch raw HTML these days? What&#x27;s some good starter (preferably project-based) learning material out there? Are the courses offered by Treehouse any good?<p>I&#x27;m coming from an app and games developer background, so while I&#x27;m well-versed in native development I have only a very vague understanding of what the web stack looks like.
======
brianchu
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.

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

------
bdicasa
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.

------
timmm
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)

~~~
deadfall
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.

------
fjabre
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.

------
Misiek
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.

------
Fr0styMatt
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!

------
sejje
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.

~~~
Fr0styMatt
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.

~~~
MrBra
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](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/](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/](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...](https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector) 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/](http://www.bentobox.io/)

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

~~~
MrBra
And.. what a timing: [https://hacks.mozilla.org/2014/06/webide-lands-in-
nightly/](https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/)

