7 ms·

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

• bdicasa 12y 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'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.
• sejje 12y ago
  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.
  • Chetane 12y ago
    > How do you use node for front-end? I've only ever seen it used for back-end.
    • JohnMunsch 12y ago
      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 https://github.com/JohnMunsch/selfhelp
  • rubiquity 12y ago
    > 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.
  • Fr0styMatt 12y ago
    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 12y ago
      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_Inspector 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/ http://www.bentobox.io/ Hope I updated you a bit with times, good luck! :)
      • 12y ago
• brianchu 12y ago
  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.
  • jackgolding 12y ago
    Thanks for this post
  • aResponder51 12y ago
    There are projects using all these tools. The initial onboarding learning curve is more of a cliff. The results are pretty smooth.
• fjabre 12y ago
  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.
• timmm 12y ago
  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 12y ago
    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.
• Fr0styMatt 12y ago
  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!
• Misiek 12y ago
  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.