Sencha Touch het HTML5 Mobile App Framework

Voor het ontwikkelen van een mobiele applicatie moeten veel beslissingen worden genomen voordat de eerste regel code zelfs wordt geschreven. Moet u bijvoorbeeld kiezen voor een webapp of een native app? Zo ja, moet u een framework gebruiken? Er is geen onjuist antwoord op een van deze vragen - het hangt van de situatie af. Vandaag gaan we het hebben over een specifieke oplossing voor deze vragen: Sencha Touch.

Wat is Sencha Touch?

Van hun website:

Met Sencha Touch kunnen uw webapps eruit zien als native apps. Mooie gebruikersinterfacecomponenten en rijk gegevensbeheer, allemaal mogelijk gemaakt door de nieuwste HTML5- en CSS3-webstandaarden en klaar voor Android- en Apple iOS-apparaten. Houd ze webgebaseerd of verpak ze voor distributie in mobiele app-winkels.

Van de makers van ExtJS hebben de nieuw genaamde Sencha-mensen opnieuw een echt krachtig JavaScript-framework gemaakt. Je kunt hier meer over het raamwerk lezen. Sencha touch kan bijna alle native UI-functies perfect repliceren. Op dit moment is Sencha Touch waarschijnlijk een van de krachtigste frameworks voor mobiele webapps en het best geschikt om complexe webtoepassingen te verwerken die een native app moeten repliceren.

Dat gezegd hebbende, er zijn nog steeds een aantal nadelen, net als alles. Om te beginnen, terwijl dit wordt geschreven, is het nog steeds in BETA. Van persoonlijke testen ben ik nog geen bugs tegengekomen. Het betekent ook dat ze nog steeds veel functies in het kader inpakken. Dat is eigenlijk goed nieuws, want dit framework zit al boordevol boordevol functies, maar je kunt nog steeds uitkijken naar dingen als camera-ondersteuning in de toekomst. Maar toegang tot apparaatfuncties zoals deze is alleen mogelijk als u deze in PhoneGap wikkelt, een ander framework dat mobiele applicaties toestaat native applicaties te zijn.

Dit brengt een ander belangrijk punt naar voren. Is een mobiel toepassingsraamwerk zoals Sencha Touch zelfs geschikt voor mijn project? Het antwoord op die vraag is moeilijk. Er zijn voor- en nadelen aan beide oplossingen en we nemen aan dat we Sencha Touch als een strikt web-app gebruiken:

Nu moet u beslissen of Sencha Touch het juiste webapp-framework voor uw project is:

Sencha Touch in een oogopslag

  • Hogere leercurve dan de meeste andere webframeworks
  • Beste webapp-framework voor echte webtoepassingen op hoog niveau
  • Schalen eenvoudig naar verschillende resoluties voor maximale compatibiliteit met verschillende iPhones, iPad en de verschillende Android-telefoons.
  • Twee thema's voor iOS en Android
  • HTML5 en CSS3 maken hogere flexibiliteit mogelijk
  • Geweldige ondersteuning voor animaties en verbeterde aanraakgebeurtenissen

Als dit allemaal goed klinkt voor je project, ga je gang en download je het. Als het een beetje overkill lijkt, wil je misschien kijken naar iets als jQTouch (kijk hier snel naar een tutorial over).

Sencha Touch downloaden

Om een ​​kopie van Sencha Touch te downloaden, gaat u gewoon naar hun website en klikt u op Download nu.

Open de sencha touch-map en klik op voorbeelden. Klik vervolgens op index.html (in de map met voorbeelden)

Blader door de voorbeelden en bekijk de verschillende functies van de verschillende apps. De meest waardevolle app voor het leren van de ware capaciteiten van dit framework is de Kitchen Sink-app. Dat is waar we naar zullen kijken:

Gootsteen

Verken de toepassing en bekijk de bron van enkele dingen om het Sencha Touch-concept te begrijpen.

Gebruikersomgeving

Als u links op de gebruikersinterface klikt, krijgt u een nieuw, mooi geanimeerd menu met specifieke UI-elementen te zien. Hoewel het er nog niet uitziet alsof ze een coverflow-interface hebben, weet ik zeker dat dit iets is dat we uiteindelijk zullen zien. Zoals u kunt zien, hebben ze voor elk essentieel element gezorgd. Laten we de broncode van tabbladen bekijken om een ​​idee te krijgen van het niveau van complexiteit van het maken van een elementair UI-element:

 demo's.Tabs = nieuw Ext.TabPanel (sorteerbaar: waar, // Tik en houd vast om items te sorteren: [title: 'Tab 1', html: 'De tabbladen hierboven zijn ook sorteerbaar.
(tikken en vasthouden) ', cls:' card card5 ', title:' Tab 2 ', html:' Tab 2 ', cls:' card card ', title:' Tab 3 ', html:' Tab 3 ', cls:' card card3 ']);

Zoals u kunt zien, is dit de vertrouwde manier van ExtJS om dingen te doen. U maakt een nieuw onderdeel, stelt de waarde van sorteerbaar in en voert vervolgens de benodigde informatie in. In dit geval de tabtitel, de tabinhoud en een herkenbare klasse. Deze krachtige eenvoud getuigt van de kracht van dit raamwerk.

animaties

Deze zijn nog eenvoudiger. Om een ​​nieuw paneel in het project te animeren, is dit alles wat u echt nodig hebt:

 demo's.Animations.slide = nieuw Ext.Panel (html: 'Dia's kunnen in combinatie met richting: "omhoog / omlaag / links / rechts".', cls:' card card2 ');

Het diaonderdeel bepaalt de overgang die u gebruikt. Je kunt de Kitchen Sink bekijken voor meer voorbeelden, zoals pop, flip, cube en fade.

Ik raad u aan nog een keer met de Kitchen Sink te spelen en zorg ervoor dat u de broncode analyseert voor alles dat u interesseert. Aangezien dit nog steeds in BETA is, is er nauwelijks documentatie over, iets dat ExtJS (nu Sencha) een beetje berucht is vanwege.

Afronden

Nu dat je een beetje meer kennis hebt over Sencha Touch, hoop ik dat je het kunt toevoegen aan je arsenaal aan mobiele applicatietools. Zoals met elke andere ontwikkelindustrie, moet u de juiste hulpmiddelen kiezen voor de klus. Sencha Touch kan dat juiste hulpmiddel zijn als u een mobiele toepassing op hoog niveau via het web aan het bouwen bent. Zorg ervoor dat het de juiste pasvorm voor uw project is voordat u verder gaat. Dat is alles voor nu, laat me weten wat je denkt over Sencha Touch en andere frameworks in de comments!