Suggestion for UI improvements

[juhnowski]

Foreword

As start point I got working app by link: http://www.sanskrit-lexicon.uni-koeln.de/scans/MWScan/2014/web/webtc2/
Source files was placed: https://github.com/juhnowski/sanskrit-lexicon-js

Motivation

1. Update UI. There is some issues for improvement UI, but for me it will be easy to fix it on new modern platform.
2. Mobile version
3. Functional Feature improvements - add smart search for instance...
4. Component model - it will allow to work on the UI to several developers in parallel at once

DESIGN

1 I want to bring to your attention on two products:
https://app.zeplin.io/projects.html - this is mostly for presentation layer
https://www.axure.com/ - more complicated tool.
I will create design forms/screens, and you will suggest or make a changes yourself. (Screens I may send directly by email for details as example)

ARCHITECTURE

All code divided to parts:

• backend
• web frontend
• mobile frontend

Backend will be REST-full Web Services which are respond json's format responses. Today backend returns simple html. I apologize that it will not be hard to extend it for json responds on existing source code without huge refactoring.
Frontend will be based on React.JS and Redux
Mobile version will be based on React Native library.

Links:
React: https://facebook.github.io/react/
React Native: https://facebook.github.io/react-native/
Redux: http://redux.js.org/

PROTOTYPE

The basic aim of this stage is validate some solutions, behaviors...
Some easy prototype may be creating in simple html file and directly open it in browser without place in webserver.
Some complex prototype may be done in axure.

Following I show my action log when another one has been done.

DEVELOPMENT

Create demo, in console:

1. Download and install Node.JS https://nodejs.org/en/
   Node.JS isn't necessary for production, it's only for development case

2. In console type:
   npm install -g create-react-app

This is a Facebook tool

create-react-app sanskrit-lexicon

Result: success creation project and suggestions:
cd sanskrit-lexicon
npm start

or other commands:
npm start
npm run build
npm test
npm run eject

Here is development environment setup.

MY PROTOTYPE LOG

AIM: create search component. In this issue context - represent how to easy to solve problems which was not trivial years ago.

1. I wrote index.html and open in browser. First component "HelloWorld" has been shown on the page.
2. Duplicate index.html as index-2.html and add list of words. Stub data incoming from server WORDS json array (made search by "om" screenshot: get_stub_data.png).
   Create 3 components:
   App - top level component aggregator
   Word - item in list
   WordsList - list of stubbed words.
   Fetching data from server instead of stubbing will be shown later.
3. Duplicate index-2.html as index-3.html and add css for pretty look.
4. Duplicate index-3.html as index-4.html and add search component.

ISSUES

1. Working with cookies - fix by using https://github.com/thereactivestack/react-cookie
   I think it will be useful to store user tag's in cookies, for instance: last viewed words, tags by book, vocabulary, last corrections, and so on...
2. Corrections - fix by store data for corrections to data model, stored in state and use in react component Correction.
3. It needs actualize existing issues and make review

PROBLEMS

1. React Native still have 0.x version, that's why there is risk of global changes and absence back reward.
2. Mobile version for iOS and Android can't have one react native code, there is not full cross platform support.
3. Create new component take a time, that is why before writing it will be better detail prototype component and test for usability.
4. Redux - data model and it's evolution is unclear for me. For models with a large number of the relational fields in tables the operations with Redux is difficult. Therefore, whenever possible, it is necessary to research the existing data model and refactor it in advance before development of components.
   If the datamodel will be more complex it will be useful investigate redux-orm https://github.com/tommikaikkonen/redux-orm
5. Fonts... It's unclear for me is the true type exists on mobile both iOS and Android devices.
6. I haven't designer skills. I try to ask the brother to develop styles for the application - he is an artist, the designer. Maybe he will develop in PhotoShop and screen forms that they then could be exported to Zeplin.

RESUME

Thank you that have found time and have read up to the end. I have tried to describe a full cycle of development on the React and to show that improvement UI by transition to these technologies not such a complex challenge as could seem on at first.

[drdhaval2785]

After a long long time, Cologne dictionaries have a frontend developer. Such a great news. I would love to see a simple static web page based on these tools. Seeing is believing in developer world. I love idea about JSON. It will surely separate Backend and UI. But why stop at web version and mobile version? Android and ios app are also hot cake nowadays. If backend serves JSONs, these two are also not far off.

[drdhaval2785]

May I request you to prepare a mock up of frontend for web and mobile version, so that functional requirements and inputs may be gathered before actual work starts.

[gasyoun]

@juhnowski glad to see you finally around. I agree that first a lot of research should come ahead of coding.

iOS and Android

I guess to start thinking about mobile without these two does not make much sense.

better detail prototype component and test for usability

Fully agree.

Fonts

If it's web, fonts are web served.

exported to Zeplin.

Zeplin was loading rather long for me. Is it not an issue? Or 2nd time quicker?

[juhnowski]

Good evening @drdhaval2785 , @gasyoun ! Thanks for warm words.

@gasyoun

"a lot of research should come ahead of coding." -

yes, for this purpose first mockups will be useful.

"Zeplin was loading rather long for me. Is it not an issue? Or 2nd time quicker?"

Yes, I think that second time may be quicker, anyway we are free to choose those programs which will be pleasant to us. The web the Zeplin version really slowly works at a slow speed the Internet.

@drdhaval2785

"May I request you to prepare a mock up of frontend for web and mobile
version, so that functional requirements and inputs may be gathered before
actual work starts."

ok, I will do it. It will be easy for me to get iPhone6 and iPad Pro display sizes for mockups. I expect that Web version will be different from the Pad only in size, but in the Phone version the relative position of components will be changed.

[juhnowski]

I start work:
http://5cw75p.axshare.com
Axure project has put to:
https://github.com/juhnowski/sunscrit-proto

I got iPad screen resolution from http://www.apple.com/ipad/compare/ for Retina display: 2732x2048

[funderburkjim]

It's excellent to have someone familiar with modern Javascript web frameworks taking an interest.

I'm assuming that you are taking the lead in working with React or whatever JS framework.

What you'll need from me regards the backend, I think. There are some tricky issues in deciding what is frontend and what is backend. Will look forward to working with you to develop appropriate backend api.

list02php provides an example of a php app using the current Cologne dev-api.

[funderburkjim]

It is likely that the current dev-api at Cologne is not what you will want ultimately, but it might provide a starting point for discussion.

[funderburkjim]

The basic04a display allows 2 dictionaries; it illustrates the 'getword.php' api.

at Cologne server

code

[juhnowski]

@funderburkjim "starting point for discussion" - exactly!

At first I want to understand all features and all pages. Then I will able to do decomposit components and states, then detail css. Axure is a place for discussion. The another one Zeplin, but it works slowly.

http://www.sanskrit-lexicon.uni-koeln.de/scans/awork/apidev/sample/basic04a/index.html

• ok, thank you for link! I start investigate project some days ago and doesn’t see it yet. Are 2 dictionaries enough for work? How does it look for 3 dictionaries - 3rd text area below? What about 4 and more dictionaries? Put all text areas on on scrollable area?

Thank you.

[funderburkjim]

The point of the basic04a example is to show you an example of how to get data from Cologne for YOUR app. I was not trying to make a general app --- that's what you are doing. The UI improvement suggestions you mention (more dictionaries, texts in scrollable area, or maybe in tabs?, etc., etc.) are
reasonable . But, my point was to show you an example of how to get data.

So where in the code of basic04a does it get the data from Cologne, you may ask.
Look at the index.html file of basic04a example, specifically at the 'basicDisplay' javascript function.
This function sets up the parameters for an ajax call to a 'getword.php' script at Cologne. This call
currently just returns a JSON string, containing html. The basic04a example then puts this html string
into a div.

Can you make a prototype of your application that uses this getword api?

[juhnowski]

Yes, I'll do it, but some time later. I want to finish UI prototype at first.

[gasyoun]

finish UI prototype at first

It's a non-trivial task. And to finalize even a prototype data would not be bad. So maybe just about time for API?

[funderburkjim]

Work on UI and API go hand in hand, I think. Hard to evaluate UI in absence of data. Hard to develop UI without knowledge of data.

Is your main goal to develop a mobile web app ? What are you envisioning as your deployment environment? GitHub Pages ?

What prompted your interest in the Sanskrit Lexicon at Cologne?

The products you mention (zeplin.io, and axure ) appear to be proprietary closed-source projects.

Have you considered gomix.com ? This is a project by Joel Spolsky, one of the originators of stack exchange. It seems to provide a potentially collaborative online environment for app development using Javascript, css, and html.

[juhnowski]

Hi, @funderburkjim

"Work on UI and API go hand in hand, I think. Hard to evaluate UI in absence of data. Hard to develop UI without knowledge of data."

• I rely on the user experience and usability of the application. In my opinion the data structure shan't define the user interface, just the opposite (for instance, there are value object, data tfansfer objects and many other templates of programming are exactly illustrate this fact).

"Is your main goal to develop a mobile web app ?"

• no.
• My goal create one page app for web, mobile and standalone descktop app. To understand me please see React, React Native, Redux stack technologies. For instance, Facebook are both mobile and web application.

"What are you envisioning as your deployment environment? GitHub Pages ?"

• I like GitHub. Do you have any suggestions? Ready to discuss?

"What prompted your interest in the Sanskrit Lexicon at Cologne?"

• I help to @gasyoun

"The products you mention (zeplin.io, and axure ) appear to be proprietary closed-source projects."

• and so what? Trial is free. It's only for prototype.

"Have you considered gomix.com ? This is a project by Joel Spolsky, one of the originators of stack exchange. It seems to provide a potentially collaborative online environment for app development using Javascript, css, and html"

• I not against to try to use it in collaboration. At first sight it isn't bad at all. Are there some limitations?

I want to offer the following plan:

• create all pages as prototype, check usability, clarify UseCase's, some Collaborations... another world Requirements Specifications
• make component decomposition - High Level Design
• develop React components (states, data,actions, reducers)
• make stubs for UI as rest services - @gasyoun API
• integrate rest services with existing backend

I am ready to discuss this plan

[gasyoun]

Work on UI and API go hand in hand, I think. Hard to evaluate UI in absence of data. Hard to develop UI without knowledge of data.

Agree.

[funderburkjim]

@juhnowski There is already a repository under sanskrit-lexicon project at GitHub that is set up for GitHub Pages; @drdhaval2785 set this up and did some experiments a year ago. SInce we are all familiar with GitHub, this might be a good place for the development work you are doing.

The name of the repository is 'sanskrit-lexicon.github.io'.
A repository with this kind of name is, on the one hand, accessible as any other GitHub repository that is part of the sanskrit-lexicon project, at the
url: https://github.com/sanskrit-lexicon/sanskrit-lexicon.github.io/

On the other hand, it is special in that html pages put into this repository (at any level of subdirectory) can be served as a web page. For instance, Dhaval made an html file at the relative address of cologne/highlighter/index.html

The following url accesses this file as a normal editable Github file:
https://github.com/sanskrit-lexicon/sanskrit-lexicon.github.io/blob/master/cologne/highlighter/index.html

But this url serves that same file as a web page:

https://sanskrit-lexicon.github.io/cologne/highlighter/index.html

So, why don't we start by having a subfolder ui-dev:
https://github.com/sanskrit-lexicon/sanskrit-lexicon.github.io/ui-dev

And put code into various subfolders of ui-dev.

While I am intrigued with gomix, it might be better to start with this GitHub Pages approach; we can look at gomix or elsewhere later if we run into limitations with GitHub Pages.

@juhnowski comments?

[gasyoun]

While I am intrigued with gomix, it might be better to start with this GitHub Pages approach; we can look at gomix or elsewhere later if we run into limitations with GitHub Pages.

Agree.

[funderburkjim]

Here's a question about reactJS and redux.

About all I know about reactJS is that it might be one of several Javascript web frameworks; I have not encountered redux at all.

Also, I understand that many Javascript web frameworks require NodeJS for the development; what I think this means is that the developer constructs various input files in certain formats. Then, some aspect of the nodejs environment processes these files and generates a folder of JS, CSS, html and this folder is then deployed to some server.

Is react like this -- namely is nodejs required for development?

[gasyoun]

is nodejs required for development

That's what I understand as well, yes.

[funderburkjim]

@juhnowski Is that right, that nodejs is part of the tool chain required for reactJS development ?
nodejs needed for redux also?

[juhnowski]

yes, but simple notepad and web browser is enough for development react.js+redux app

[funderburkjim]

@juhnowski Please be patient. I'm trying to understand your point of view.

I looked at https://github.com/juhnowski/sanskrit-lexicon-js.

index.html is just text with JS libraries loaded from cloud. It runs anywhere - on desktop, GitHub Pages,...
Great!

But where did index.html come from? Did you type all this in? or was the nodejs environment somehow
involved? If so, can you add the code required to build index.html into the repository. Or, even better,
put one of the index.html, index-1.html, etc. into gomix.

In https://github.com/juhnowski/sunscrit-proto. This is somehow created from your UI prototype
http://5cw75p.axshare.com made with the axure tool?
what is the 'proto1.rp' file? It shows as a large file (300K), but must be in some proprietary, non-text format. How would it relate to the sample sanskrit-lexicon-js/index.html.

You mentioned Zeplin. This seems to be a design tool. Were you mentioning it just as a possible tool for designing a web page - another way to do what axure does?

[funderburkjim]

I still think that the best next step is for you to make a full application, one using the getword api at Cologne that I mentioned above, and your 5cw75p.axshare.com UI prototype.

I realize this first example would be imperfect in numerous ways.
But it would serve the purpose of letting us see at least most of the moving parts that are involved in
this new and better approach to making a web application.

At the moment, my hunch is that the best place to do this next step is at gomix, since it has live support for nodejs web apps, and since it is easy to view the code.

[drdhaval2785]

@funderburkjim and @gasyoun

As I understand, @juhnowski wants to finalize the frontend prototype first and then create frontend version and finally send some API calls to backend. It seems fine to me.
The need for him as of now is to validate the frontend prototype and give feedback.
I groped with the axshare link he sent. It has a discussion page on each prototype.
I have noted my input in discussion portion of home page. We should have a look at the current Cologne frontend and write a detailed change note as possible.
See

[funderburkjim]

I think it is premature to think that we can 'finalize' anything. Just take any of the sample UI prototypes and implement it with existing api, so we can see from start to finish, what is involved.

From the UI prototype (as shown in screen shot), what is the next step to implmentation with reactJS ?

If my questions to @juhnowski are scaring him away, I can step aside and let others work on this without interposing my opinions.

[gasyoun]

@funderburkjim no, he is not scared away, he had health issues that should be settled by now or soon enough. He was waiting to start the UI update since one year ago. Now, when he has more time, he is eager to help. And without you he will not be able to make it work, that's for sure.

[drdhaval2785]

Jim, You need to deliver responses of APIs in JSON instead of HTML embedded. That will help him develop and integrate frontend for start to end project.

[funderburkjim]

Glad he's not scared away; sorry to hear about health issues @juhnowski Get well soon!

Regarding API and JSON: I think the 'getword' example is ok to start. It IS returning JSON, but
a JSON string rather than a JSON object with named fields. It shouldn't be hard to make a version
which returns a JSON object. But I'd rather wait until more definite specifications are known to do this.

@drdhaval2785 : From your experiment with axure, maybe you can help me understand what is meant
by a 'prototype'. From what I see in the screen shot, my impression is that a prototype is an HTML/CSS design; for instance, it could be developed by a static web-site wysiwig html editor; or even by manual construction of html. Is this impression correct, or is there more to a prototype than this?

[juhnowski]

Hello, now at me everything is all right with health. I periodically have painful campaigns to the dentist .

@funderburkjim:
" Just take any of the sample UI prototypes and implement it with existing api, so we can see from start to finish, what is involved." - yes, you are right. I get one issue and fix it by React.JS.
"it could be developed by a static web-site wysiwig html editor" - yes, I planned such use.
The main purpose of the prototype is to draw static pages in order to identify use cases and to decompose components

@drdhaval2785
"You need to deliver responses of APIs in JSON instead of HTML embedded." - yes, It will be better.
In this case, I can build a more accurate data model on the UI side.

I also have news. I began to study hadup and can share training in private.
I would like to know your opinion about the possibility of using this technology on the backend for searching, filtering, statistics. It will be possible to conduct statistical studies of dictionary articles in the context of original texts.

[gasyoun]

http://hadoop.apache.org/

[vvasuki]

I would like to know your opinion about the possibility of using this technology on the backend for searching, filtering, statistics. It will be possible to conduct statistical studies of dictionary articles in the context of original texts.

My note on couchdb in sanskrit-lexicon/COLOGNE#117 (comment) may be of interest here. You can write Map-reduces and create various views quite easily in JS.

@kakella this thread may be of interest to you.