How to build a Interface like Evernote. One Page, Columns

Evernote just released a new web interface which is interesting. It's one page, columns are resizable with the mouse etc.

Screenshot: http://blog.evernote.com/wp-content/uploads/2011/03/evernote_web_new8.jpg

What's the best way to build somet开发者_如何学运维hing like this with jQuery? Also, any idea what Evernote used to build this interface? I couldn't find anything in firebug with hints.

Thank you

If you're curious about this sort of stuff you should play around with Chrome Developer Tools, the Firefox Firebug Addon or the Safari's 'Developer' menu. They're really great at giving you an insight as to what is going on in a webpage

As to "how did they build this" there's many, many different technologies being used up and down the web application stack. Keep in mind the servers storing, caching and fetching all this data are just as much a part of the web application as the frontend. But I imagine your question is asking how "how did they get this webpage to do all this interactive stuff".

Basically it looks like it's all traditional HTML/CSS--no "HTML5" canvas shenanigans or Flash.

The interactivity comes from their custom Javascript code. I tried to figure out if they're using some popular 3rd party Javascript Framework (like jQuery or Prototype) but they are importing so many scripts it's hard to follow. Interestingly enough jQuery and $ are not defined variables on the Evernote page, so it looks like they're not using jQuery at the least. They have clearly written a lot of Javascript to get this thing up and running so it's not that big of a stretch to imagine they they would just decide to keep all their code in-house.

FYI: The three columns are just absolutely positioned and sized <div>s.

<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; bottom: 0px; width: 220px; ">...</div>

<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 220px; top: 0px; bottom: 0px; width: 360px; ">...</div>

<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 580px; top: 0px; right: 0px; bottom: 0px; ">...</div>

The scrolling that you see in those columns is done in child <div>s.

webapps like this are usually built with a javascript framework such as backbone, angularjs, ember, etc. here is a reference site which lists them:

http://todomvc.com/

Its hard to see what js framework they are using if any but there are using jQuery 1.8

They are using http://icanhazjs.com/ which is a javascript client side template library.

They are using http://requirejs.org/

Well, at the very basic evernote has accomplished its note app workflow using custom javascript, although there are lot of others frameworks they have used for backend work. One way is to see it using Chrome web Inspector nad if on Firefox ,then they have upgraded there web inspector and its much cooler now, but if you prefer the much popular firebug, it will do.

For detailed info, on what are the resources they have used to build, on way is to track it using a web analyzer tool like www.buitwith.com

here, is the link for the homepage of the evernote site , searched over Builtwith.com : http://builtwith.com/?https%3a%2f%2fwww.evernote.com

However the app, that is built upon comprises a lot of custom code. Hard to specify the exact usage, but if we check the code, it doesn't show any of specific use of AngularJS , they do use requireJS for loading modules.

As your question is front-end specific, it can be done using HTML5, with some javascript or if you prefer a framework to ease the process, then checkout this link from JQueryUI.

https://jqueryui.com/resizable/

They are still the kings of UI development, if AngularJS and ReactJS are not mentioned to be overwhelmed.

And also , if you try to do it using plain vanilla JavaScript, that will give you an edge to the learning curve a loads.

They use Angular.js, HTML5, CSS3, custom Javascript, and JQuery (and lots of other stuff as others have noted).

From: http://evernote.com/careers/job.php?job=om2qXfwv