Tool: 5個前端工具

  • Frameworks :

Backbone ,



provide robust solutions to build amazing apps, leveraging all of the web’s power.

  • Javascript: the web language, has grown a lot (both in popularity and in maturity)
  •  back-end side implementation with NodeJS.

  • 5 best tools and frameworks

1. 用: Chrome dev tools

a complete suite of diverse instruments.

You can edit the DOM (HTML)/CSS in real-time,

debug Javascript step by step while undertaking a deep performance analysis, even add a terminal.

用: The DOM/CSS editor 

an extremely powerful tool, letting you provide realtime feedback to your team, iterating fast on the UI/UX of a new feature.

參考: The official website and the Google Developers Youtube channel both are goldmines of information.

用: command-line API 

contains really useful commands.
You can for example copy anything to your clipboard from the console by calling the special `copy` function and pass the thing to be copied (object, function return, etc.)

參考: lot of great tutorials are also available on HTML5 Rocks.


It’s a Javascript task runner, offering both a lot of bundled plugins for common tasks, while still being very extensible, giving you the option to write all kinds of tasks to suit your need. The best comes when you can combine tasks together to create even more powerful ones!  Grunt offers a wide variety of plugins,  ranging from watching files to linting, compiling, and minifying your code.

Its syntax is consistent and easy to learn and a lot of examples are available around the Web.


LiveReload is a simple Web protocol that triggers events to the clients whenever files are modified.

Clients can handle this event in their own way, even if the most common use case is when a file is modified (or is a compiled version).   The client/server come in various implementations

the Chrome store is full of powerful ones.

  • WhatFont, which lets you discover the rendered font of any element on any website (useful when looking for the perfect typography you saw on another site, or for debugging your font-face styles).
  • Page ruler: another useful one, mainly because just like any front-end developer, you’re obsessed by pixel perfection, right?
  • Proxy SwitchySharp can also be of great help when it comes to debugging localized information (default currency, phone numbers, etc)

great testing frameworks, as powerful as what you may have already used with other languages.

The two main frameworks today areJasmine and Mocha.

4 Mocha

  • The main advantage comes when you work with a lot of asynchronous code, a common use-case when developing in Javascript.
  • Mocha offers only the behavior testing structure (more about BDD), and not the assertion/mock framework. But there’s nothing bad here, since it perfectly integrates with dedicated frameworks likeChai and Sinon.
  • Sinon comes with a full-set of functions to easily mock objects and stub methods.
  • Chai is remarkable in the way that it lets you make assertions in a very similar way to natural language

5 Karma

lets you execute your tests from your workstation (in continuous mode) to the production CI.

It can launch multiple browsers (Chrome, Firefox, IE (!), PhantomJS, etc.) and run your tests against them, giving you maximum confidence in your code



在下方填入你的資料或按右方圖示以社群網站登入: Logo

您的留言將使用 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )


您的留言將使用 Facebook 帳號。 登出 /  變更 )


連結到 %s

%d 位部落客按了讚: