TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

22 pointsby Fr0styMattalmost 11 years ago
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.

7 comments

brianchualmost 11 years ago
A modern front-end stack looks like:<p><i>For structure&#x2F;content</i>: raw HTML, or less commonly a language that compiles to HTML (Haml, Jade, etc.).<p>If the HTML is being rendered and served from the backend, you might use a templating language like Django&#x27;s templating or Jinja (Haml and Jade also have these features).<p>If you are creating an application that does a lot of AJAX, you will also often use a JavaScript templating system like Handlebars.<p><i>For styling</i>: 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.<p><i>For logic&#x2F;interaction</i>: 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&#x2F;frameworks that can be used here. Most commonly you&#x27;ll use jQuery and jQuery UI widgets. For more complex applications, single page app frameworks like Backbone, Angular, or React come into play.<p><i>Build process</i>: For more complex projects, build tools like Grunt or Gulp to watch for changes to the filesystem and re-compile files (typically when you&#x27;re using CoffeeScript or a CSS preprocessor), to package everything for deployment (minifying JavaScript, etc), and to run tests.<p><i>Packaging</i>: Often you&#x27;ll use a tool to keep track of modules&#x2F;packages. These tools are quite different. Bower, RequireJS, Browserify, Component, and other tools occupy this space.<p>Often you&#x27;ll use Node&#x27;s npm to keep track of build process and testing packages!<p><i>Testing</i>: For testing you&#x27;ll often see frameworks like Jasmine or Mocha&#x2F;Chai for unit tests&#x2F;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.<p><i>Debugging</i>: Chrome&#x27;s developer tools (or Firebug&#x2F;Firefox&#x2F;Safari).<p>For someone starting out this is probably overwhelming. The important things to realize are that:<p>1) No one uses all these tools<p>2) Most of these tools are only useful for large complex codebases with large teams.<p>2) The most common stack is raw HTML, raw CSS, raw JS, jQuery, jQuery UI, Bootstrap, no build process, no packaging, no testing.
评论 #7950606 未加载
评论 #7948436 未加载
评论 #7954702 未加载
bdicasaalmost 11 years ago
Not many developers that I know of use WYSIWYG editors. Most is done by hand, at least in my world of web development. Haven&#x27;t taken the courses by Treehouse but I&#x27;ve heard good things. I&#x27;d recommend looking into a good JavaScript framework like Facebook&#x27;s React, Google&#x27;s AngularJS or Backbone.<p>If you really like strongly typed languages, and want to try out a new platform, check out Google Dart.
timmmalmost 11 years ago
Development Tools<p>1. An HTML&#x2F;CSS editor (FireBug for FireFox)<p>2. Network Traffic Monitor (Foxmeter for Firefox)<p>3. Cookie Manager (Advanced Cookie Manager)<p>4. User Agent Switcher (for Firefox)<p>5. Modify Headers (optional)<p>6. Javascript Console<p>Those are your tools for debugging, writing some things.<p>Technologies you will have to learn...<p>1. jQuery<p>2. MVC framework<p>3. API&#x2F;JSON content calls<p>4. AJAX<p>5. Cookies (same&#x2F;cross domain)
评论 #7923312 未加载
fjabrealmost 11 years ago
HTML &amp; CSS were developed to abstract documents and present them through a web browser.<p>You&#x27;d be better served making a native app that integrates with a RESTful web api on the backend.<p>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.
Misiekalmost 11 years ago
I think the most important part of modern web developement are frameworks:<p><i>JS frameworks: jQuery, AngularJS, BackboneJS</i><p><i>CSS frameworks: Bootstrap, Foundation</i><p>and tons ready-to-use solutions on Github.
Fr0styMattalmost 11 years ago
Thanks everyone for the suggestions. I&#x27;m starting out by working through some stuff on TreeHouse and then will go from there. Looks like it&#x27;s going to be a great adventure!
sejjealmost 11 years ago
No WYSIWYG. Virtually all raw HTML.<p>Treehouse was decent when it launched, and I imagine it&#x27;s improved a solid amount by now.<p>If you&#x27;re coming from a development background, you&#x27;ll do fine.<p>If you&#x27;re building true front-end apps, you&#x27;re going to want to look at Angular or Node.<p>If the back-end does the heavy lifting, they become less important.
评论 #7913957 未加载
评论 #7914201 未加载
评论 #7911847 未加载