HTML5 UI 프레임 워크
다음과 같은 많은 HTML5 UI 프레임 워크를 찾았습니다.
나는 또 다시 너무 많은 자원에 압도당했습니다. 그들 중 일부를 보았지만 거의 모든 것이 너무 느리고 무거운 것처럼 보였습니다.
어느 것을 배울 지 약간 혼란 스러워요. 각 웹 사이트는 마치 시장에서 최고인 것처럼 제품에 대해 이야기합니다. (명백한 마케팅 전략).
웹 앱 개발 및 클라이언트 측 JS UI 프레임 워크의 초보자 여러분의 경험을 바탕으로 속도, 위젯 컬렉션, 복잡성, 룩앤필, 지원 등을 고려하여 신속한 데스크톱 웹 앱 개발을 위해 어떤 앱을 추천합니까?
학습을 시작하기 위해 어떤 것을 추천합니까?
많은 답변이있을 수 있고 각 답변이 다른 답변을 선호 할 수 있다는 것을 알고 있지만, 이것은 저를 조금 안내하고 가장 인기있는 프레임 워크에 대한 비평가를받는 데 도움이 될 수 있습니다.
귀하의 질문에 너무 많은 것이있어서 답이 쉽지 않고 전혀 명확하지 않을 것입니다. 또한 매우 독단적 일 것입니다. 가져온 프레임 워크 목록을 보면 서로 거의 비교할 수없는 매우 다른 것을 볼 수 있습니다. 나는 그것들을 어떻게 든 그룹화하고 목록에 더 많은 프레임 워크를 추가하려고 노력할 것입니다.
여기서 주요 질문은 특정 프레임 워크의 장단점이 아닙니다. 주요 질문은 : 얼마를 원 하십니까? 정말로 Gmail 또는 Grooveshark와 같은 응용 프로그램을 의미 했습니까? 아니면 Stackoverflow와 같은 것을 의미 했습니까? 전혀 간단하지는 않지만 여전히 웹 사이트입니다. 이 모든 옵션을 고려해 봅시다.
탭, 대화 상자, 드래그 / 드롭 가능한 일부 요소, 텍스트 편집 등과 같은 일부 위젯으로 웹 사이트를 향상시키고 싶고 개발 모델을 변경할 의사가 없을 수 있습니다. 내 말은, 당신이 좋아하는 Java / PHP / Ruby를 사용하고 자바 스크립트로 많은 앱의 로직과 동작을 작성하고 싶지 않다는 뜻입니다. 이 경우 jQuery 기반 플러그인 유사 솔루션, 특히 jQuery UI 및 jQuery Mobile .
jQuery 위젯은 플러그인 시스템을 따릅니다. 이것은 일반적으로 사용하기가 매우 쉽다는 것을 의미합니다. 버튼을 생성하려면 다음과 같이 작성합니다.
$('#myButton').button();
이제 비활성화하려면 다음 패턴을 사용하여 메서드를 호출합니다.
$('#myButton').button('disable');
예를 들어 슬라이더 또는 날짜 선택기에서 값을 가져 오거나 설정하는 것은 다음과 같습니다.
$('#mySlider').slider('value');
$('#mySlider').slider('value', 42);
보시다시피 jQuery 기반 솔루션에는 모델이 없습니다. 모든 데이터는 DOM에 보관되며 기발한 메서드 호출을 통해 얻습니다. 데이터를 동적으로 처리해야하는 경우 (예 : 복잡한 유효성 검사 수행, 백그라운드에서 무언가로드, 필터링 또는 정렬)이 작업이 곧 지저분해질 것임을 알 수 있습니다. 그건 그렇고, 이것이 jQuery UI 팀이 아직 그리드 컨트롤을 제공하지 않은 이유입니다. 모델 없이는 할 수 없습니다. jQuery Mobile에서는 간단한 마크 업을 통해 멋진 모바일 UI를 얻을 수 있지만 페이지간에 데이터를 전달하는 공식적인 방법은 없습니다.
요약 : 다중 페이지 웹 사이트가있는 경우 양식을 게시하는 경우 jQuery UI 또는 Twitter Bootstrap 과 같은 더 가벼운 솔루션을 사용 합니다.
아마도 더 복잡하고 응용 프로그램과 같은 (단일 페이지 응용 프로그램?)을 만들고 싶을 것입니다. 클라이언트 측에서 데이터로 작업해야한다는 것을 알고 있습니다. 그렇다면 당신의 선택은 무엇입니까?
모델, 데이터 바인딩 및 웹 앱을 만드는 다른 수단을 제공하는 많은 JavaScript 프레임 워크 중 하나를 사용하여 jQuery UI와 통합 할 수 있습니다. 또는 Kendo , Wijmo 또는 jqWidgets 와 같은보다 완전한 프레임 워크를 사용할 수 있습니다 . 이러한 프레임 워크는 jQuery (Wijmo는 jQuery UI에 의존)에 의존하고 데이터 조작의 추가 수단을 제공합니다. 그들은 데이터 모델을 가지고 있습니다. Kendo는 자체 솔루션을 구현하고 (내 생각에는) Wijmo와 jqWidgets는 인기있는 Knockout JS와 통합됩니다.
따라서 Kendo와 Wijmo는 위젯 / 컨트롤과 일부 지원 모델을 모두 제공하는 프레임 워크 그룹에 속합니다. Dojo Toolkit 과 같이 jQuery 기반이 아닌 다른 프레임 워크도 있습니다. 동적 데이터로드를 추가하면 다소 복잡한 웹 애플리케이션이 생성됩니다. 당신은 무엇을 더 원할 수 있습니까?
실제로 가장 중요한 것은 잊혀졌습니다. 애플리케이션을 어떻게 구성 (구성)합니까? RESTful 방식으로 서버와 통신하는 단일 페이지 앱을 빌드하려고하면 애플리케이션에 아키텍처가없는 경우 곧 엉망이 될 것입니다. 이를 위해 일반적으로 필요한 기능은 일부 우려 분리 (MVC, MVVM), 템플릿, 라우팅 및 모듈 관리입니다. 곳이다 SproutCore를 하고 엽차가 나타납니다. 위젯이 작은 부분에 불과한 웹 앱을 빌드하기위한 포괄적 인 솔루션을 제공합니다.
It may seem like SproutCore and Sencha are the winners here, because they are the most complete solutions that include both UI and the business logics and also structure your application. Despite all the pros, there are some cons. Some say they are too heavyweight or will require to adhere to their development model, which you might not like. For example, in Sencha you describe your GUI in JavaScript and use Sencha's type system. This adds a sort of heavy feeling that there are abstractions and wrappers, while you really like the ease of HTML, CSS and vanilla JavaScript.
But this is not the only way. The power of web is that there are many-many frameworks, libraries, tools out there, smaller and bigger ones, that will help you craft your app the way you like it. For example, consider AngularJS. It doesn't provide a set of controls itself, but combined with Twitter Bootstrap becomes a complete solution for RIA. Or, for example, look at EmberJS, a more lightweight framework from the guy who created the heavyweight SproutCore. It doesn't provide you with a set of widgets either, but is, in my opinion, a very good base for an app.
So here is my final thought instead of conclusion. All those framework usually show you their widget set, nicely looking themes and the other visual stuff. But what really matters is how you will actually develop you application, how you will structure it, where you will implement your logic. Get to know what the framework provides and think through whether you can substitute what's missing.
Infeligo's answer is top notch. My experience may be of interest to some. I use Ruby on Rails as my server platform where the bulk of my business logic resides.
At the front end I use dHTMLX which is a JS library of 'objects' the most powerful of which is their grid object. Most of my apps have business/accounting information processing/display requirements and the grid object is my mainstay there. However their object set is comprehensive including the ability to create additional 'windows' within the single application to provide a MDI type interface to the end user. I typically have a login form which when successfully applied opens a single HTML page with a menu at the top. Based on selection from the menu new windows are opened and closed to display / manipulate information. These windows are within the scope of the single HTML page.
All the objects have very good events associated with them and I do quite a bit of validation at the front end using these events. However I usually duplicate all validation of data within the Rails Model as well. It's additional work but I'm just extra cautious. There are also a number of abstract objects that help to connect data between the front end visual objects e.g. grid and back end server. Most of the data connections can be done using XML or JSON. I use XML over JSON simply because of my experience with that structure and the fact that Rails provides a decent XML builder. So in my case I rarely use any Rails based views as all of my visual objects come from dHTMLX.
The other thing I like about dHTMLX is the speed of their objects. For example the grid object will quite easily handle 10,000+ rows at very acceptable speeds.
The BIG DOWNSIDE of the suite is it's documentation. The company is an eastern European developer and therefore it is often difficult to understand exactly what their documentation means. Also their documentation tends not to document everything completely and so a lot of time is wasted in trial and error type learning.
Hope this helps
ReferenceURL : https://stackoverflow.com/questions/12961536/html5-ui-frameworks
'developer tip' 카테고리의 다른 글
| MVC 3 Razor에서 활성 페이지 링크를 얻는 더 나은 방법 (0) | 2021.01.10 |
|---|---|
| 다음 json 문자열을 Java 객체로 변환하는 방법은 무엇입니까? (0) | 2021.01.10 |
| 요청 객체를 수정하는 django (0) | 2021.01.10 |
| selectize.js 입력 값을 설정하는 방법은 무엇입니까? (0) | 2021.01.10 |
| GET 요청을 수행하고 Querystring을 작성하십시오. (0) | 2021.01.09 |