Skip to content
jahudka edited this page Feb 27, 2017 · 3 revisions

Nittro is built to be highly modular. It's up to you to decide which features you want or need to use, but it might come in handy to know what features are actually available when you're making that decision.

Base packages

These are the packages you'll be using practically all the time if you want to get serious about Nittro.

NPM: nittro-core

This is the base package which provides essential utilities upon which Nittro is built. It doesn't provide any directly useful widgets but it is required by all other Nittro packages.

NPM: nittro-di

The Dependency Injection component is again more of an internal thing (that is, until you start developing your own custom extensions for Nittro), but using it is highly recommended because almost all of the other packages provide DI Builder extensions which take care of initialising them. If you don't include the DI package in your custom build, you'll have to take care of initialising everything by hand (and trust me, that could take a while).

NPM: nittro-ajax

This package provides a layer of abstraction over AJAX. You can think of it as a more advanced version of jQuery's $.ajax().

NPM: nittro-page

This package takes care of loading clicked links using AJAX, displaying transition animations, updating the DOM using the snippets received in the response and pushing new entries onto the history stack. It's really the workhorse that does most of the heavy lifting in an AJAX-enabled application.

NPM: nittro-forms

The Forms component makes the netteForms.js client-side validation script integrate nicely with an AJAX-enabled application: validation errors are rendered same as they would on the server side instead of the ugly window.confirm() that is netteForms.js's default and validation works even for forms loaded via AJAX. The component also integrates with the Page component to add support for submitting forms using AJAX, complete with file uploads and everything.

NPM: nittro-flashes

This component renders flash messages received in AJAX payloads without the need to render the flashes in a snippet on the server side.

NPM: nittro-neon

This is a JavaScript port of the NEON parser and encoder from Nette.

NPM: nittro-datetime

The DateTime component provides a JavaScript interface for working with dates and times similar to that of PHP's DateTime class.

NPM: nittro-routing

The Routing component provides an URL and DOM router which can be useful if you need to initialise some custom client-side code every time a specific DOM element appears on the page or the user navigates to a specific URL within your app. You probably won't be needing this until much later.

Extras

These packages provide additional functionality and / or widgets. You may not need them, but you should definitely check them out.

NPM: nittro-extras-confirm

The Confirm widget can be used as a drop-in replacement for the standard window.confirm() prompt. Unlike that hideous ghost of decades past the Confirm widget works asynchronously and provides a Promises/A+ compatible interface. It also integrates with the Page component if it is present to provide a very simple means to get confirmation from the user before loading a certain link or submitting a certain form by adding a single data attribute.

NPM: nittro-extras-dialogs

The rock upon which the Confirm widget is built, but also quite a powerful widget on its own. It integrates with the Page and Forms components and can, for example, be instructed by a data attribute to show a given snippet received in the response payload in a fancy dialog window. There is also a dialog manager service which takes care of setting proper Z-indices for any open dialogs so that the last dialog to open is always on top of any dialogs open before it.

NPM: nittro-extras-dropzone

The DropZone widget provides handling of files dragged by the user into the browser window. By far the easiest and most powerful way to use it is to have the DI factory create it from a HTML file upload input which itself has been created by Nette Forms and thus has validation rules attached to it: the DropZone will automatically have the same validation rules, will handle both files dragged onto it and files selected by the original input field (so that you can provide a single handler to create the user experience no matter which way the user selected the files) and of course any files managed by the DropZone will be uploaded when the original input field's form is submitted.

NPM: nittro-extras-paginator

Don't make your users click through 40 pages of products in search of that awesome T-shirt they want to buy! It is 2017, ffs. Using the Nittro Paginator you can have Nittro load the next page automatically as the user scrolls down. Of course, the user may try to scroll up, too, and Paginator will happily oblige and load the previous page as well! Everything happens seamlessly in the background while the user keeps searching for the thing they can give you their money for. Browser history is updated as well. Just make sure that nothing too important for the user is hidden away in the page footer like Facebook did, it might be a bit hard for your users to reach it.

NPM: nittro-extras-checklist

The CheckList component is a bit of a pet peeve. It allows your users to toggle consecutive checkboxes by dragging from the first to the last. How will the user know to do that, you may ask? Well, that is up to you, but I can assure you, once they find out about it, they'll never want to go back. Just see for yourself - if you work with Photoshop, you can toggle layer visibility by dragging from the first layer's "eye" icon to the next. Try it before you read your morning mail, then open up your Gmail inbox and try going back to having to manually check every single box one by one to get rid of all that SPAM. It's quite infuriating.

NPM: nittro-extras-keymap

Use the KeyMap component to specify custom key bindings for your application or to define contexts for navigation using the Tab key. KeyMap integrates with Confirm (Enter to confirm, Escape to cancel) and more generally Dialogs (for example limiting the scope of navigation using the Tab key to the topmost open dialog).

NPM: nittro-extras-storage

The Storage component provides a wrapper for the browsers' localStorage and sessionStorage interfaces with an API that is similar to the Nette Session API.