Front-end development tools

Goksel
goksel
Published in
3 min readAug 25, 2015
  • No need to commit dependencies to version control
  • You declare your dependencies in bower.json so that other things can determine them easily
  • Define a range of acceptable versions for a dependency
  • Use different builds of a dependency for dev vs. prod
  • You can distribute the package.json/bower.json file and everyone can get up to speed with a simple “jspm init, bower install”

Why JSPM (+systemjs) instead of Bower

Bower has only one purpose-to download source files you need from the web to your hard disk.If you want to execute script files from bower, you need to create your script tags for each of them.

While jspm is not only a module downloader. It downloads by default systemjs that you have mentioned. You might also call it ES6 module shim. With it, you are able to use ES6, CommonJS or AMD modules in the browser without building them. Not only ES6 modules, but all the other ES6 features supported by traceur/babeljs. Also it can build the bundle for you when you need to go to production.

  • Need to quickly get jquery and include it in your server-side templated html?
  • Go with bower. need to build large JS app? Go with jspm.

Why ES6(systemjs) over AMD(requirejs) and CommonJS(nodejs modules)?

CommonJS Modules

  • Compact syntax
  • Designed for synchronous loading
  • Main use: server

AMD

  • Slightly more complicated syntax
  • Designed for asynchronous loading
  • Main use: browsers

ES6 modules

  • Support for Ecmascript 6 (var, let, constant)
  • New import, export and module keywords. (If there is something you want others to use)
  • The goal is to create a format that both users of CJS and of AMD are happy with
  • You get compile time errors if you try to import something that has not been exported.
  • You can easily load ES6 modules asynchronously.
  • Declarative syntax (for importing and exporting).
  • Programmatic loader API: to configure how modules are loaded and to conditionally load modules.
  • It’s the future!

REST & SOAP services

REST describes a set of architectural principles by which data can be transmitted over a standardized interface (such as HTTP). REST does not contain an additional messaging layer and focuses on design rules for creating stateless services. A client can access the resource using the unique URI and a representation of the resource is returned. With each new resource representation, the client is said to transfer state. While accessing RESTful resources with HTTP protocol, the URL of the resource serves as the resource identifier and GET, PUT, DELETE, POST and HEAD are the standard HTTP operations to be performed on that resource.

SOAP defines a standard communication protocol (set of rules) specification for XML-based message exchange. SOAP uses different transport protocols, such as HTTP and SMTP. The standard protocol HTTP makes it easier for SOAP model to tunnel across firewalls and proxies without any modifications to the SOAP protocol. SOAP can sometimes be slower than middleware technologies like CORBA or ICE due to its verbose XML format.

REST API, using HAPI

Hapi.js (Node.js) web framework to build reliable/scalable apps faster.

Key Benefits

  • Performance — WalmartLabs are the guys who found/solved the Node.js CORE Memory Leakthey have developed Hapi following Benchmark Driven Development and the result is a high-performance framework.
  • Security — they have focussed on security and battle-tested the framework during Black Friday(holiday shopping busy day) without incident.
  • Mobile Optimised (lightweight — built for mobile e-commerce)
  • Plugin Architecture — easy to extend/add your own modules (good ecosystem)
  • DevOps Friendly — configuration based deployment and great stats/logging see:https://github.com/hapijs/good
  • Built-in Caching (Redis, MongoDB or Memcached)
  • 100% Test/Code Coverage (for the core) — disciplined approach to code quality.
  • Key Functionality is Built-in and there are many plugins for other functionality:http://hapijs.com/plugins

Karma, Jasmine, Protractor (testing)

Karma is a test-runner, so it run your test.

Jasmine is the framework that let you write test.

Protractor is made for E2E test (test navigation like a real user). It combine WebDriverJS and Jasmine and let you write End-to-End test (you simulate a real browser and taking action) with jasmine syntax.

Sources:

--

--