Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Need to develop a Javascript UI  RSS feed

 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I've a angular based UI, it need to rewrite into Javascript UI.
How to do it, I don't know how convert the Angular UI to JavaScript UI.
To develop a UI in Javascript, do I need to start from scratch and develop or is there any way we can convert from Angular  to Javascript.
I never developed any UI either in Javascript or Angular. I know some basics of Javascript, but don't know how to implement a UI.

Please suggest me how to start/path.


Thanks.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66207
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Aditi Ishitha wrote:I've a angular based UI, it need to rewrite into Javascript UI.

What does that mean? What is a "JavaScript UI"? Angular is a JavaScript framework, so it's UI is a JavaScript UI. So I don't know what you mean by "JavaScript UI".

 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
They don't want any Angular in the UI, so just plain UI using Javascript module. So I want to develop one scratch, can you please help me how to do it?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66207
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Aditi Ishitha wrote:They don't want any Angular in the UI, so just plain UI using Javascript module. So I want to develop one scratch, can you please help me how to do it?


Which JavaScript module? JavaScript is just a language and without any frameworks, there's no "modules" to create UI.

Are you perhaps talking about creating an HTML5 web site without any JavaScript frameworks? In this case, while you may be using JavaScript, it's not creating a "JavaScript UI"

Can you tell us more about this strange requirement and what instructions you have been given? As it is, it doesn't seem to make much sense and is racing in the opposite direction than the remainder of thinsutry which is adopting frameworks such as Angular, React and VueJS to help ease the complexity of creating front-end applications.

If Angular is disliked for some reason (understandable) why not look at React or VueJS?

If those aren't acceptable, what would be? jQuery?

What is the overall goal of the requirement?
 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Here is my task description, You might get clear understanding if you read this.

"The agent locator UI component version has become outdated which has made maintenance a costly task.  We need to replace the angular SPA implementation in favor of a more traditional JavaScript module that can perform async requests in the frontend of the new NodeJS app for XXX.com.
There is currently a bug in the locator app embedded in the ExpressionEngine CMS, so we will rewrite the angular app in a JS module format for the new NodeJS web app and port that implementation over to the legacy CMS."

Now can might can answer me what I'm trying to do, can you please direct me how to develop one UI?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66207
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
OK, so it sounds like the front-end app in Angular is deemed unmaintainable. That's not uncommon and sometime better to start from scratch.

It also sounds like you have a new backed system written in NodeJS. Does it use a REST API? If not, it should. That makes the choice of front-end technologies wide open.

By "module system" I assume that the author of the requirements is referring to ES6 modules. Brwoser support for that is spotty, so most front-end applications use Babel (or similar) to transpile ES6 to ES5 for deployment.

If Angular got you into trouble (seen that, so not uncommon) then I'd recommend looking at React or VueJS.

What you do not want to do is to try to write your own front-end framework in raw JavaScript. If you think you have an unmaintainable nightmare on your hands how, it's practically impossible to create a maintainable SPA "by hand". That's why front-end frameworks exist in the first place.

Do you not have a technology person responsible for helping you pick appropriate technologies for your tasks?
 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, it has a NodeJs app, but it doesn't use REST API, the who wrote this NodeJs App, he is not working here anymore(he left the company), so his tasks has been assigned to me. and I'm Java developer not the front end UI developer.
They are suggesting me to use which ever suites better for the UI, use that they said.
I'm kinda new to this, don't know how to start and what to use. I investigated that, I've to develop a separate UI which we will be using in all apps wherever it needed, and I saw that in the NodeJs app the old guy has developed some part of agent locator and he used Babel(I read something in his README).

Can you suggest me a good way to start and develop one?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66207
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Aditi Ishitha wrote:Yes, it has a NodeJs app, but it doesn't use REST API

What does it present as an API then? How is a SPA or other client supposed to interact with this back-end system?
 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It is agent location Map. it will provide the available agents locations on the map in our website. No, clients are not support to interact with the back end. we have a Javaservice which uses Mongo DB and I have to use that javaservice to fetch the locations to display on the Map. I mean I've to call the javaservice(it is spring java service) in the UI.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66207
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So there is no HTTP API at all?     

If that's the case then you need to go back to whoever wrote the requirements and let them know that a typical JavaScript SPA is impossible as there is no way for the SPA to communicate with the backend over HTTP. How is the current Angular UI communicating with the backend?

It sounds as if they want you to step back in time and create the UI on the backend like one would do with servlets and JSP (expect in NodeJS and JavaScript). Certainly this can be done, but it's not a SPA at that point.

I think that your time would be better spent fixing the back-end to expose a modern HTTP REST API so that it is independent of UI clients, and so that you can use modern tools to create such UIs.
 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
They have used handlebar js in the NodeJs app, and they have a Javaservice which uses the HTTP API and I've to use this service in the UI.

Is it good to use handlebar framework to perform async requests in the frontend? Which framework you suggest in order to suite my task and can please give me a good comparison with handlebar(why we've to use that(any like Vuejs or React))

My task description :"The agent locator UI component version has become outdated which has made maintenance a costly task.  We need to replace the angular SPA implementation in favor of a more traditional JavaScript module that can perform async requests in the frontend of the new NodeJS app for thegeneral.com.
There is currently a bug in the locator app embedded in the ExpressionEngine CMS, so we will rewrite the angular app in a JS module format for the new NodeJS web app and port that implementation over to the legacy CMS."

 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66207
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
handlebars does not make async requests -- it is simply a templating library that takes a text template and fills it in with data. Sort of like a mini-JSP or Freemarker (if you are familiar with either of those).

It sounds as if they want you to generate the UI in the NodeJS code rather than create a SPA application that runs independently (which sounds like step back in time to me, but they didn't consult me).

Does the NodeJS app use Express or other NodeJS frameworks to handle incoming requests?
 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, It uses Express.
 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What I explored that in the NodeJs app the guy he implemented the agent locator using the handlebar and he used the Javaservice-locatorsvc. let me post you the comments he wrote:


WIP new implementation of agent locator UI component as a JS
(add) assets/scripts/component/agent-locator.js
(edit) config.js
(edit) assets/scripts/app.js


WIP initial load of map and list items is looking good for
(edit) assets/scripts/component/agent-locator.js
(edit) views/locator.hbs

GEN-9015 WIP highlighting of location list items and details page
(edit) assets/scripts/component/agent-locator.js
(edit) assets/scss/component/locator.scss
(edit) views/locator.hbs

GEN-9015 WIP cycling through pages of results and updating location
(edit) assets/scripts/component/agent-locator.js
(edit) views/locator.hbs
GEN-9015 WIP handling update to map bounds when opening facility
(edit) assets/scripts/component/agent-locator.js
(edit) views/locator.hbs
(edit) views/locator.hbs
(edit) app.js
(edit) package.json
(edit) routes/index.js

fixed issue with map bounds fit when navigating to the
(edit) assets/scripts/component/agent-locator.js


there are some more, but when I run it it is not working.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66207
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well, that really gives you your answer.

They apparently want you to implement the UI in the NodeJS app using Express and Handlebars templates. And using ES6 modules to organize the JavaScript code.

Mind you, I think this is a mistake that your organization is making, but it is their choice.

Beyond that, I cannot help you. I have never written an Express app to do anything other than provide a RESTful API that other client applications use via HTTP.

 
Aditi Ishitha
Greenhorn
Posts: 19
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks, I appreciate your time for the responding for my questions.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!