Awesome

⏰ Tracks

🚜 WIP Angular 2 Progressive Web App. _lot's of snipets with love

Master branch is published here. https://tracks.tmpo.io

⌨⌨ <span color="red">Also if you found this repo interesting, and you are looking for someone that can help you build better frontend projects. We are available for hire! </span> ⌨⌨

📺 Whats on?

• Progressive Web App built with Angular2. (2.3.x)
• Uses ngrx/store to keep the state and syncs it to localStorage.
• App is OnPush Theoretically there is no changedetector (but it's still compiled in the javascript) I think there is no easy way of tree shake it (perhaps by module design). Also I found some recursive callbacks with zone when you record a timeline profile.
• Optimized for high performance on mobile devices (Tested on an old Samsung galaxy note 2)
• Using Observables for interactive elements.
• 🔥 A swipe implementation ala Cycle (Using observable streams)
• Using service worker from google-chrome.
• 🌴 An example on howto build it with rollup (30% reduction in size than with cli). Check devel branch. There is a makefile that should do the job.
• Still not optimized for desktop browsers

🔨 Some other interesting snippets you can find on de codebase:

• 🏎 Apply animations to host components
• 🔺 Acces nativeElement (the DOM object)
• 📦 The whole App state is managed through ngrx (also routing) This exploits the fact that Observable streams are lazy. Each data stream is built declaratively, with small functions. Component subscription is managed with the async pipe
• ✈️ An example of how declaratively build the data stream allows to test the important parts.
• ⌚️ A timer like a clock built with an Observable Stream Also interesting on the example the use of a seter, to change the component behaviour.
• 👏 An example of how to implement authorization with GAPI The idea is to let export your tracks to google Drive.

✂️ Things I did to optimize the size:

• I don't use angular router. The app is only two screens and the angular router is about 30Kb.
• I also don't use forms and http.
• I tried to provide my own implementation of Commons (because I'm only using two directives and one filter), but it's almost impossible to get rid of it, without making ugly hacks.

Contributing

✨ If you like the app or you would like to contribute in something, feel free to send us a PR. it will make us so happy.... ✨

Ports:

I'm also porting the app to preact to see the main differences on the process

🛠<br /> You can track the progress here<br/>github.com/jordic/tracks_preact

Screenshot

Built with :heart: by TMPO.io