New web interface

[tananaev]

Apparently Sencha is dying:

https://www.sencha.com/forum/showthread.php?377323-Sencha-sold-to-IDERA

I think we need to start seriously thinking of rewriting the web app.

[tananaev]

One potential library that we can use:

https://dojotoolkit.org/community/roadmap/

[Abyss777]

Bad news, I was waiting for ExtJS 7. Any way, It will take much time to implement the same level of functionality. I think we have to develop it in parallel for some time.

[tananaev]

Agree. There is still some chances that they release version 7, but I think we should start working on alternative.

[Abyss777]

Sure, I'll start to studying this framework. It would be nice If you create some skeleton, may be branch or subfolder

[tananaev]

We need to decide what to use first. Maybe we should use react with something like this:

http://www.material-ui.com/

[tananaev]

Good thing about react is that we can potentially make native mobile apps later using react native.

[Abyss777]

We are used to working with stores on ExtJS and dojo also has similar thing https://dojotoolkit.org/reference-guide/1.7/dojo/store.html#dojo-store I think it is very important benefit.

What if we create list of features waited from framework... like

• [ ] Openlayers support
• [ ] RESTful data stores
• [ ] Tables with filters
• [ ] ...

[tananaev]

OpenLayers is just a map library. You can include it in a simple div.

REST data stores and tables with filters are nice to have, but not really a requirement. We can implement all that ourselves. The benefit would be that we have more control and it will probably be much faster than ExtJS stuff.

I think the main requirement is to have enough UI widgets for everything that we need. Grid, forms with all different field types, various toolbars and menus, resizable panels. Last one needs more research. Possibly we can just use some pure HTML components.

[tananaev]

Another option for nice UI widgets:

https://getmdl.io/

It's not really a JS framework, but it's fast and look nice.

Demo that might be kind of relevant to our use case:

https://getmdl.io/templates/dashboard/index.html

[tananaev]

I have also found this. Might be useful as a reference on how others implement similar functionality:

https://github.com/geoadmin/mf-geoadmin3

[tananaev]

Another thing I want to consider is using Leaflet library for maps. It's much smaller (god for mobile) and simpler than OpenLayers. There is a good plugin for including Google Maps (a lot of people are interested in this). It doesn't have as many features as OpenLayers, but then we don't actually need that many features. We use markers and various geozones and that's about it. What do you think?

[Abyss777]

Implementing stores, tables and filters might take a time... But agree ExtJS is not fast at all.

I briefly looked at Leaflet, I like it at first sight. It has all we need and what is interesting I found a couple of plugins for SVG marker icons, I believe we could implement native SVG icons, and manipulate them as SVG, without rerendering to <img> on all change.

Also I liked mf-geoadmin3, very nice looking. Good reference.

One important thing to decide is licence. Will we migrate back to Apache 2.0? Are these libraries fit by licence to us?

[tananaev]

Yes, that's one of the most important parts. We want Apache 2.0 again. All of the libraries that I've mentioned should be good.

I want to try React with Material UI to see if it would work for us.

[Abyss777]

OK. React is popular and used/supported by big companies, do not think it will die soon. Material UI is nice looking. Hope you finally will like tabs :smiley:

[Abyss777]

One more, I'm not good in web programming, but as I understand React is only "V" in MVC, what will we use for states? Redux?

[tananaev]

I'm not an expert myself, so I guess we'll have to learn.

[Abyss777]

One more thing also would be nice to have is unit tests.

[tananaev]

Agree, it would be nice to have some tests for web app.

[ovnicraft]

IMO project can move: react + material-ui + Leaflet; best options its has compatible licenses. Said that, you will start a plan for ?

[tananaev]

I don't get the question.

[tananaev]

I have done some more investigation and it seems like React is not a very good match for our project. Neither Leaflet nor OpenLayers have a good integration with it. There are only some very basic wrappers. I'm sure it's possible to somehow make React and map libraries work together, but it's not going to be easy or nice.

[Abyss777]

Agree, wrappers (I have found) are very basic. I believe they do not support all we need.

[tananaev]

What do you think about following stack:

• Material Components for UI
• Leaflet library for map
• Pure modern JavaScript for most other stuff
• Some smaller third party libraries as required

[Abyss777]

I like it, a lot of work, but we could do it smaller and faster without frameworks. Only thing, I could not find tables (grids in terms of ExtJS) in Material Components.

[tananaev]

I have noticed it as well. Apparently it's in development. Maybe we can use some third party component until they develop official one.

https://github.com/material-components/material-components-web/issues/57

[Abyss777]

Agree, also we may rethink interface and implement most things without tables. They are necessary only for reports.

[tananaev]

I was also thinking about it. We can use lists, especially if we want to make it more mobile-friendly.

[ovnicraft]

Did you check vueJS ? I am not JS expert btw let something here: https://github.com/PaulLeCam/react-leaflet

[tananaev]

@ovnicraft, we can consider vue.js if you can explain the benefits.

I have already researched react-leaflet. It is very basic integration as I mentioned above.

Please don't just throw in some names that you heard unless you know what you are talking about.

[allenhwkim]

Hi, I am an outsider.

I just saw your conversation linked from Material Design Component data table issue and makes me interested into the discussion. I think the choice you are making is very considerate and admirable. I want to leave some of my experience if you don't mind.

• Material Components for UI

I have been researching for 3 days about good web components. Material Components is my best choice compared to bootstrap, Material UI(React), MDL, or Materialize. It's designed to work as component itself regardless of any web framework.

• Leaflet library for map

I have been using Google map for long time and it has very good API, even with streetview etc. I am also the owner of https://ngmap.github.io/ and https://github.com/ng2-ui/map. However you need to pay for it when it becomes commercial. Also it does not provide a very customized requirements, e.g. setting North to any side. I used Openlayer. It's powerful, but not developer-friendly IMO. Not experienced with Leaflet though. :(

• Pure modern JavaScript for most other stuff

ES6/ES7 ways makes the code a lot to easy to read IMO. Also using classes makes documentation a lot easier.

• Some smaller third party libraries as required

You may need a framework, which handles routing, storage, http call handling, server-side-rendering, performance. Experience with angular1, angular2, and react was ok, but not satisfactory. Recently I learned VueJs, and it seems very easy and promising.

[tananaev]

Thanks for your comments.

Google Maps are not free, so it's not really an option.

[Abyss777]

https://habrahabr.ru/post/334676/ Might be helpful comparing of Leaflet and Openlayers (in Russian)

[tananaev]

Doesn't seem like there is anything against Leaflet in the article. There are some negative comments about plugins, but I guess we'll use minimum of plugins and mostly standard API.

[Abyss777]

As I understand most features are in plugins, what is in openlayers core is in leaflet plugins, but I believe we will cope with it.

Could not find some timely library to work with REST and local storage. https://github.com/lincolnloop/amygdala fits but outdated

Other candidate is Dojo again https://dojotoolkit.org/reference-guide/1.10/dojo/store/JsonRest.html

Any other ideas? Or may be again will consider dojo?

[tananaev]

We can just use pure JavaScript or jQuery.

[Abyss777]

Rewrote simple on leaflet

There is no marker labels, only tooltips. I think it is OK, we need own Icon implementation any way for our SVG images, can add label to it.

[tananaev]

I'm thinking of splitting out images into background and icon. This way people would be able to easily use custom icons.

[Abyss777]

Agree, It is reasonable and we will not need define IDs for every icons. Also I'm thinking, there are some FR to show motion state and ignition on the Icon. May be it makes sens to envisage this functionality. Like small overlay icon of key (ignition) and some arrow or exclamation mark (to show motion). What do you think?

[tananaev]

Sure, we need to make it flexible. Probably doesn't make sense to overcomplicate everything from the beginning, but we need to keep it in mind.

[Abyss777]

OK. I'll start preparing some draft for device icon class for leaflet.

[Abyss777]

Actually it is easy to use font awesome directly, like this https://github.com/danwild/leaflet-fa-markers Can we use icon8 in the same way?

[tananaev]

I'm not sure. It might be too big to include as a font.

[Abyss777]

Implemented a draft https://drive.google.com/open?id=0Bxu1vjhFvq74MDdKQnJETHJYN1U

Works smoothly and very fast, nothing blinks. Icons is two SVG: internal icon loaded from files and background inlined. Rotating happens on SVG, without replacing whole icon. Zooming happens on div container. Caption placed as span

Ready to show the code somehow.

[tananaev]

Looks nice.

[Abyss777]

Implemented rather functional simple application with leaflet and pure js

https://github.com/Abyss777/traccar-web/tree/traccar-web-new/web/new

It supports device images, openstreetmap, carto and custom maps (for others we probably should use plugins), also implemented following selected device. Tested in Chrome/Chromium, FF and IE 11 (Edge)

[tananaev]

Perfect as a reference, but we need to layout some architecture for the whole app to make it modular and flexible.

[Abyss777]

Totally agree, I've just touched leaflet to understand how easy/hard to work with it. Actually I liked it. (But I hate zoo of browsers)

Yes we need to choose a way to work with modules and dependencies. May be it is reasonable to use the same as in libraries we going to use. Or others...

http://requirejs.org/docs/whyamd.html https://github.com/umdjs/umd

[tananaev]

I'm on holiday till 14th, but after that I should have more time to work on the new web app. We definitely need to decide how we are going to deal with modules and libraries.

[tsmgeek]

Have you seen the potential issues with React due to the Facebook licence. It could cause any company issues. WP have decided to pull it all out and implement vue.js instead.

Should be some though to how big some of the libraries are, extjs is really heavy which is slow to init on mobile devices.

Its all well and nice to try having one responsive interface for desktop/mobile but ultimately what works well on desktop does not work so well on mobile. It may be an idea to create a full/light interface that reuses much of the same core code.

[tananaev]

Have you read the thread before commenting? We are not planning to use React.

Obviously it's good to have separate desktop and mobile websites. Even better would be to have native mobile apps, but we just don't have resources to support it. The only feasible option I see at the moment is responsive app. Feedback on Traccar Manager clearly shows that slower app with full functionality is better than fast native app with less functionality.