trello's Graphical User Interface - frontend

Anybody here knows which technology or framework or whatever is being used to present that nice GUI on Trello website ?
I'm a little bit outdated about front-end technologies.

Here is a very nice write up of the Trello tech stack from Fog Creek (the creators):
The Trello Tech Stack
In a nutshell (if you're too busy to read the article) they use:
Client
Backbone (for client-side MVC)
HTML5 (for pushState)
Mustache (for templating)
Server
node.js
HAProxy
Redis
MongoDB

On the front-end, Trello predominately uses jQuery and Backbone.js. All of the modals, menu, and dialog windows are custom. All of the CSS is custom. Trello uses and icon font for icons.

Related

Has Node JS anything to offer for the UI?

Hope I'm not being to general but: I have been tasked with the job of "rejuvenating/modernizing" a monolithic Java EE (JSF/CDI/EJB/JPA) app. Since the requirements state that it should support multiple clients, I have split up the code in a server (JAX-RS interfaces) and a client part (not yet done)
The server is pretty straightforward but I'm wondering about the UI part. Nowadays (hope I don't sound too oldskool) various Node JS spin-offs seem to be popular but I'm under the impression that they have the most value to offer in the "scalable server" section. Does the various Angular/React/Node framework have anything to offer for the client if you have something more complex than a single page app?
It appears to be a really hard time to pick a UI technology nowadays. Sure, the server/DB part which contains most of the business logic are pretty future-proof but still, one would like to focus on one UI technology. There are various jQuery-based frameworks like Kendo, Vaadin & co etc. One option would be to stick with JSF + ICEfaces/PrimeFaces and just work with the REST interface. And then there is JavaFX which looks nice but the future looks a bit uncertain.
So. If the backend is not going to be Node JS, does Node JS have anything to offer for the UI part that can't be done more easily with other frameworks and does anyone have other insights on the UI layer in general. Predicting is hard, especially the future ;-)
Node.js is a way to run javascript on the server side, not client side. That said, npm (nodes package manager) or its wrappers (like bower) are quite often used to manage the client side dependencies - which is very useful to have.
Angular and react (among others) are client side javascript ui frameworks to help make writing ui much nicer. Neither depend on the backend being written in node.js and can work with any rest api (or other server side apis) - or no api at all if that backend injects all the data the page needs into the page itself.
Electron, which combines NodeJS and Chromium (render Process).
https://electronjs.org/
Formerly known as atom shell it was created by Github, it is the core of the Atom Editor, VS Code, Slack app, and a ton of “thick client” applications. https://en.m.wikipedia.org/wiki/Fat_client
There are several implementations which allow you to use Node.JS modules on a client-side (ie. web browser). You can then use html/css and call Node.JS modules directly from your DOM which is used to implement UI.
I'm most familiar with NW.js which I've used couple of times. Others would be for example Electron or AppJS

First Time Developing Web-Based Geographic Information System

I'm assigned to develop web-based GIS, but I'm new with web programming. So, Where I can get an insight to start develop web-based GIS?
thank you before
regards!
You have to know about the 2 main components for web programming: front-end and back-end.
Front-end, is how the results/graphics are going to be displayed in the client (pad, monitor).
The most common tools are the javascript libraries like ArcGIS API for JavaScript, or OpenLayers.
For front-end you need to learn about html, css and javascript.
Back-end, is how you will manage the architecture (models-databases) of your project. There are many technologies to choose, for example, Java (J2EE) or .NET. For geodatabases there are systems like SQL server or PostGIS. Back-end is normally placed in the server.
In GIS you would also need a web mapping server (for sharing data, for instance), you can use GeoServer or ArcGIS for Server (commercial).
In my experience, I like to use django as back-end, this is a framework for web development using python (There are also many libraries for GIS using python which you can integrate). With django you can use a model-view-template controller to manage data to the web pages in a simple and fast way. Django has also a module called geodjango, to manage geodatabases, but not strong as GeoServer.
Start with "Requirements". To understand what requirements is, please start with a book on software engineering.
Once you have the requirements, you need to "Design" - what tools/technologies/languages to use. If you are just beginning programming, you typically get a senior to do the design
Then you get to a task, such as rendering google maps on a web page, that can be answered in something like stackoverflow.

Mobile app with Node.js backend - What framework to pick for client-side dev?

I'm planning to build a hybrid mobile app,
I have already progressed pretty well with the server-side using Express 3, and PAssport for authentication.
Now I need to make a decision on what framework or library to use for the clinet-side.
I was wondering if I could get some recommendations and perhaps pros and cons of going with frameworks like
Sencha Touch, JQuery Mobile, Phonegap....
and if there is anyother ones that you think it's worth considering please mention them here,
Thanks for any pointers or advice
JQuery Mobile and Sencha Touch are JavaScript libraries that will let you create an HTML5 application that looks like a native application. Cordova/Phonegap lets you wrap your HTML5 app in native code and provides a common JavaScript API that gives you access to native functionality, like taking a picture with the camera or getting the users Contacts. Another benefit of using Cordova is that it creates native applications for you using the same HTML5 app, so you can publish these files to App stores and increase your distribution. With a JQuery/Sencha Touch only app, you can't distribute on app stores because your hybrid app is simply a website (so, I guess it'd only be a mobile app.)
There are hundreds of blog posts comparing different JavaScript frameworks like Sencha vs jQuery vs Dojo, so you should just go off and do some of that reading. Personally I would suggest Dojo as I think it is the most powerful and enterprise ready framework, but it can have a steep learning curve. One thing I like about Dojo though is the build system, you can pick and choose the modules you want so that you don't have to end up including an enormous .js file like JQuery. I have no idea if jQuery can do this, but a lot of user apps I have seen that use Cordova and JQuery end up including all of jQuery and then jQuery mobile.
If you want to access native device features and/or package the web app as a native app and distribute it on the stores, you should use one of those JavaScript frameworks in combinations with Cordova. (Cordova is the new name for PhoneGap.) Phonegap/Cordova is not really used to build mobile web apps, it's used to extend the capabilities of mobile web apps and allow them to access native device functionality in a completely cross platform way.
Ionic is a new framework available for making hybrid apps that I am liking a lot so far. The framework is built with Sass and AngularJS on top of PhoneGap. Ionic just handles the front end so you still build your app with PhoneGap. I found that since it uses AngularJS your javascript code ends up being a lot cleaner and you will save development time making your app slick compared to what you would have to write with jQuery. It also has some beautiful UI elements. The ionic team has done a lot of speed optimizations with the framework so your app will feel more native than your typical hybrid app built purely with PhoneGap. The framework is still in alpha but I have been impressed with it.

Which technology for business web application?

I am pondering on building a CRM for consulting business and am looking for best technology to build on. It will be web based with maybe a plugin that integrates with Outlook. What I don't want is to spend a lot of time doing HTML-fu and CSS-fu just to get basic grids, data entries and so on up. I don't mind picking up a new language. Preference goes to FLOSS projects. If it works with Python + 50 points :)
Projects on my mind:
Google's GWT - great ecosystem. Pity that it is in old-fashioned Java, but there's Pyjamas too!
Django - has all the nice widgets for web, but requires maintaining essentially a dual code base - backend language and front-end. Does not work with JS challenged browsers :(
Any suggestions how to quickly build and maintain web based business app are welcome.
My vote is with Adobe Flex. Some high-level advantages of flex:
Browser compatibility: any browser with a flash player will run the site (currently over 90% I believe). No need to fudge with html/css.
Data binding: the flex framework's strongest suit is dynamic scalable data binding.
Server-side technology: Flex can couple with any server-side technology for back-end operations (Java, PHP, RESTful web services, and Coldfusion to name a few)
Open source: flex is open source (however, buying the eclipse-based Flash Builder is usually a good idea)
Customization: every flex component is completely customizable and skinnable. Nice for business apps that do not want to simply look the same as everyone else.
Desktop: Using Adobe AIR Desktop Environment users can interact with the OS.

Video plugin in chat.

I'm developing a social networking application for browsers using PHP and I want to have a chat application feature that supports video chat features like in Gmail (Google provides a browser plugin for this). Where can I find such an application or is there something available for a starting point for me to develop one on my own?
Thanks.
You could try using a service like ToxBox. They provide an API;
http://developers.tokbox.com/index.php/Main_Page

Resources