DOCSLIB.ORG

Crossmos Hybrid Mobile Web-Apps & Sencha Platform

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Crossmos Hybrid Mobile Web-Apps & Sencha Platform Crossmos Hybrid Mobile Web-apps & Sencha Platform Ruben Smeets Kris Aerts 17/06/2015 Agenda • Hybrid App Technology o Hybrid vs Native vs Web o Patterns o Web portion architecture o Common pitfalls and best practices • Choosing a hybrid app approach • Latest developments • Sencha platform hands-on experience Low Ranking Hybrid vs Native vs Web High Ranking Native apps Hybrid apps Web apps Through native app Search on referrals Ease of discovery stores (Facebook, twitter, etc.) Fragmented across Reach Works on almost all devices multiple platorms Access to Depth of Full acces to platform native API at Limited by browser experience resources the expense of sandbox UI Customer Apple Appstore Complete ownership of ownership & terms enforce onerous terms customer Engagement and Notifications and home No notifications, difficult to recurring use screen icon get user to save the link No accepted method of Monetisation High through payment (Chrome web- potential Appstores store) Ease of cross- Replication developing Significant fragmentation platform for multiple platforms for advanced apps development VisionMobile Cross-Platform Developer Tools 2012 Hybrid vs Native vs Web Low Ranking Continued High Ranking Native apps Hybrid apps Web apps Web content Upgradebility & Through native app updates require No approval needed updates stores ** no approval Debugging & Full support by native Browser debugging tools testing development tools automated testing tools Vendor lock-in No code sharing Limited to no code sharing (framework) between platforms between frameworks Cloud-based Multi-platform Local build for each build tools No cross-platform building build support platform seperately offered by required frameworks **Enterprise app stores require no update approval. They set their own terms. Hybrid Mobile App Patterns Pure Blended Mullet Fallback pattern pattern pattern pattern + + Properties • Single webview for • Use native components • Fully native for early • Mostly native app entire screen for the main navigation parts of a user flow UI (e.g. Tab bar) within the app • Uses hybrid webviews • Content & navigation (product browsing) for little used or done in HTML5 • Use multiple webviews frequently changing with content • Web based for later content • Thin native wrapper parts like checkout exposing native APIs • Native transition animations Example Apps • Lokale Politie • Apples’s App store app • Walmart apps • Facebook app Antwerpen app • Google’s Gmail app • Belk apps • Autosalon 2015 Brussel Native vs Hybrid vs Web – Kinvey & MOOVWEB ebook Hybrid Mobile App Patterns Pure Pattern Hybrid App Mobile Operating Graphics Touch Screen, Keyboard System Touch Events Web Portion of App Data Wifi HTML, CSS, JS Calls, Data GSM Network HTML API Audio Microphone APIs JS API JS Calls Phonegap Wide Audio Speaker Range of Rendering Engine API Calls Services Image,Video Camera (webview) Specific Phonegap OS- Activation Vibration API Bridge Location GPS Native Portion API Calls Of App Data Storage Native, Web or Hybrid Mobile App Development – IBM Worklight webinar Hybrid Mobile App Patterns Blended Pattern Hybrid App Graphics Mobile Operating Native Header System Touch Events Web Portion Data ofWeb App Portion HTML, CSS, JS ofWeb App Portion Calls, Data of App HTML,HTML CSS, JS API Audio CallsHTML,HTML CSS, JS API APIs Audio Calls Rendering Engine HTML Wide API Range of (webview )API JS Calls Image,Video RenderingPhonegap Engine Services (webview ) Specific Activation RenderingAPI Engine API Calls OS- (webview ) Location Native APITab BarAPI and APINavigation Data Native App Portion API Calls Hybrid Mobile App Patterns Mullet and Fallback Pattern 1 2 Products Checkout • Similar development process Webview o Mostly native development Container Native UI BUY Web code • Webview portion not necessarily Tab Bar Tab Bar implemented using custom wrapper Mullet (e.g. Phonegap) Fallback Products • Difference between two patterns is Native size and location of web portion UI Webview o Mullet: full screen webview Container Web code o Fallback: portion of screen webview Native UI Tab Bar Hybrid Mobile App Patterns Examples Politie Antwerpen Apple App Store Walmart Facebook Pure Pattern Blended Pattern Mullet Pattern Fallback Pattern (Single Page) (Multi Page) Agenda • Hybrid App Technology o Hybrid vs Native vs Web o Patterns o Web portion architecture o Common pitfalls and best practices • Choosing a hybrid app approach • Latest developments • Sencha platform hands-on experience Hybrid App Web Portion Architecture Hybrid App • CSS UI frameworks o Implement web-app UI in CSS/HTML Web Portion of App o E.g.: Bootstrap, Ionic • Javascript UI frameworks Javascript CSS UI UI o Implement web-app UI in Javascript Framework Combined Framework o E.g.: jQuery, Enyo Framework Architecture Framework • Architecture frameworks o Provide modularity with MV* architecture HTML5 Hybrid tool o E.g.: AngularJS, BackboneJS • Combined frameworks Native Portion o Combine CSS UI or Javascript UI with Of App architecture framework o E.g.: Sencha Touch, Kendo UI Hybrid App Web Portion Architecture HTML5 Hybrid Tool Topology Hybrid App • HTML5 Hybrid tools Web Portion of App o Package web app in native wrapper CSS UI Javascript UI using webviews Framework Framework Combined Framework Architecture Framework o Provide APIs for access to device features HTML5 Hybrid tool o E.g.: Phonegap/Cordova Native Portion of App • Enterprise mobile platform HTML5 hybrid tools o Custom native containers with Communi- cations Authen- enterprise features Webview tication (rendering Custom Secure App o Standard container extends Phonegap/ Context engine) JS API Storage Mngmt. Cordova Push Phonegap Phonegap Notifications o E.g.: IBM MobileFirst JS API Plugins www.appeariq.com Hybrid App Web Portion Architecture iOS – Windows Phone Webview Overview Default Browser iOS User Webview Browser Application Browser version Coverage engine Engine Earlier 2% 100% UIWebView (standard Javascript Interpreter) iOS7 16% 98% Safari (Nitro JIT engine) WKWebView iOS8 82% 82% (Nitro JIT engine) Active devices May 25th 2015 as measured by the App Store Windows User Webview Browser Default Browser Application Phone Coverage engine Browser Engine version (WebViewClass) 7.x 7,5% 100% Same as default browser Internet Explorer Mobile version 9 8.0 16% 92,5% Same as default browser Internet Explorer Mobile version 10 8.1 74,2% 76,5% Same as default browser Internet Explorer Mobile version 11 Windows 10 2,3% 2,3% Same as default browser Microsoft Edge (Chakra engine) mobile Windows Phone device statistics for May, 2015 from AdDuplex Hybrid App Web Portion Architecture Android Webview Overview Default Browser Android Webview Browser Codename/API User Coverage Application version engine (Android.webkit.webview) Browser Engine 2.2 (Froyo, 8) 0,3% 100% 2.3.3 (Gingerbread, 10) 5,6% 99,7% 4.03 (ICSandwich, 15) 5,1% 94,1% Android Default Android Default (webkit) + carrier- (webkit) 4.1 (Jelly Bean, 16) 14,7% 89% specific replacements 4.2 (Jelly Bean, 17) 17,5% 74,3% 4.3 (Jelly Bean, 18) 5,2% 56,8% 4.4 (KitKat, 19) 39,2% 51,6% Chromium (Blink) Chromium (Blink) Chromium (Blink) + 5.0 (Lollipop, 21) 11,6% 12,4% Chromium (Blink) Independent updates Chromium (Blink) + 5.1 (Lollipop, 22) 0,8% 0,8% Chromium (Blink) Independent updates Active devices January 7th 2015 as measured by the Google Play Store excluding devices under Android version 2.2 Hybrid App Web Portion Architecture Android Webview Overview – continued Default Browser Android User Webview Browser Custom Codename/API Application version Coverage engine Webview Engine (Android.webkit.webview) (Crosswalk) Browser Engine 2.2 (Froyo, 8) 0,3% 100% 2.3.3 (Gingerbread, 10) 5,6% 99,7% 4.03 (ICSandwich, 15) 5,1% 94,1% Android Default Android Default (webkit) + carrier- (webkit) 4.1 (Jelly Bean, 16) 14,7% 89% specific replacements 4.2 (Jelly Bean, 17) 17,5% 74,3% 4.3 (Jelly Bean, 18) 5,2% 56,8% Crosswalk (Blink) + update every 6 4.4 (KitKat, 19) 39,2% 51,6% Chromium (Blink) weeks Chromium (Blink) Chromium (Blink) + 5.0 (Lollipop, 21) 11,6% 12,4% Chromium (Blink) Independed updates Chromium (Blink) + 5.1 (Lollipop, 22) 0,8% 0,8% Chromium (Blink) Independed updates Active devices January 7th 2015 as measured by the Google Play Store excluding devices under Android version 2.2 Hybrid App Web Portion Architecture General WebView Concerns • WebView capabilities vary as a function of o The mobile OS o The version of the mobile OS o The device manufacturer (e.g.: Android: google, samsung, etc.) • Less access to advanced HTML5 features for security reasons o Websites providing features overview • http://caniuse.com/ • http://mobilehtml5.org/ • Developer agreement compliance o Restrictions imposed by marketplaces on web-content can cause app rejection or your app being pulled o E.g.: Simply wrap your mobile website into a native container without added functionality Hybrid App Web Portion Architecture General WebView Concerns – continued • Performance of bridging calls between web and native is not optimal o E.g. sub-second requests were discouraged in 2013 o Apple streamlined bridging interface in WKWebView • Difference in scrolling behavior between WebView and native o Can be mitigated in new versions of web-kit • webkit-overflow-scrolling: touch CSS property o CSS/JS libraries like FTScroller/iScroll (for older versions) • Complexity of native mixed with web introduces more points of failure o Backwards compatibility issues • Security threats against WebViews can cause unwanted behaviour o
Load more

Recommended publications
  • Technical Description of Using Multiple Browsers in Denton
    Technical Description of Using Multiple Browsers In Denton ISD By Garrett Chandler The global IT industry, as a whole, is in an interesting transition period. There are a variety of variables that play into why users, both consumers and enterprises alike, must use a number of different web browsers on their computer. In order to understand why we are experiencing these issues today, it’s important to look at three things: where the IT industry once was and where it’s going, the current trends of web developers, and finally, how Denton ISD utilizes certain services such as Eduphoria, and TAC. Please bear with me as things may get slightly technical. HTML 5 is code for designing web pages on the Internet. HTML5 has grown tremendously over the past few years and is quickly becoming the code of choice for web developers. Eventually, trends suggest, that HTML 5 will be the standard code across the web, as designated by the World Wide Web Consortium (W3C). However, this adoption is entirely up to the web developers and how it meets their requirements in the services they provide, their business goals, and marketing strategies. HTML 4.01 is the current standard by W3C, which has been the standard since 1999. Aside from HTML, as the web has grown from its adolescence, it has learned new languages in the form of other types of code, especially as technology as a whole progresses. For years Internet Explorer was the most common web browser on PC’s as Microsoft dominated the enterprise market. However, with the imminent demise of Microsoft Windows XP on the horizon, other companies like Google and Mozilla have seized the opportunity to own the web.
    [Show full text]
  • Pragmatic Guide to Javascript
    www.allitebooks.com What Readers Are Saying About Pragmatic Guide to J a v a S c r i p t I wish I had o w n e d this book when I first started out doing JavaScript! Prag- matic Guide to J a v a S c r i p t will take you a big step ahead in programming real-world JavaScript by showing you what is going on behind the scenes in popular JavaScript libraries and giving you no-nonsense advice and back- ground information on how to do the right thing. W i t h the condensed years of e x p e r i e n c e of one of the best JavaScript developers around, it’s a must- read with great reference to e v e r y d a y JavaScript tasks. Thomas Fuchs Creator of the script.aculo.us framework An impressive collection of v e r y practical tips and tricks for getting the most out of JavaScript in today’s browsers, with topics ranging from fundamen- tals such as form v a l i d a t i o n and JSON handling to application e x a m p l e s such as mashups and geolocation. I highly recommend this book for anyone wanting to be more productive with JavaScript in their web applications. Dylan Schiemann CEO at SitePen, cofounder of the Dojo T o o l k i t There are a number of JavaScript books on the market today, b u t most of them tend to focus on the new or inexperienced JavaScript programmer.
    [Show full text]
  • THE FUTURE of SCREENS from James Stanton a Little Bit About Me
    THE FUTURE OF SCREENS From james stanton A little bit about me. Hi I am James (Mckenzie) Stanton Thinker / Designer / Engineer / Director / Executive / Artist / Human / Practitioner / Gardner / Builder / and much more... Born in Essex, United Kingdom and survived a few hair raising moments and learnt digital from the ground up. Ok enough of the pleasantries I have been working in the design field since 1999 from the Falmouth School of Art and onwards to the RCA, and many companies. Ok. less about me and more about what I have seen… Today we are going to cover - SCREENS CONCEPTS - DIGITAL TRANSFORMATION - WHY ASSETS LIBRARIES - CODE LIBRARIES - COST EFFECTIVE SOLUTION FOR IMPLEMENTATION I know, I know, I know. That's all good and well, but what does this all mean to a company like mine? We are about to see a massive change in consumer behavior so let's get ready. DIGITAL TRANSFORMATION AS A USP Getting this correct will change your company forever. DIGITAL TRANSFORMATION USP-01 Digital transformation (DT) – the use of technology to radically improve performance or reach of enterprises – is becoming a hot topic for companies across the globe. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-02 Companies face common pressures from customers, employees and competitors to begin or speed up their digital transformation. However they are transforming at different paces with different results. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-03 Successful digital transformation comes not from implementing new technologies but from transforming your organisation to take advantage of the possibilities that new technologies provide.
    [Show full text]
  • HTTP Cookie - Wikipedia, the Free Encyclopedia 14/05/2014
    HTTP cookie - Wikipedia, the free encyclopedia 14/05/2014 Create account Log in Article Talk Read Edit View history Search HTTP cookie From Wikipedia, the free encyclopedia Navigation A cookie, also known as an HTTP cookie, web cookie, or browser HTTP Main page cookie, is a small piece of data sent from a website and stored in a Persistence · Compression · HTTPS · Contents user's web browser while the user is browsing that website. Every time Request methods Featured content the user loads the website, the browser sends the cookie back to the OPTIONS · GET · HEAD · POST · PUT · Current events server to notify the website of the user's previous activity.[1] Cookies DELETE · TRACE · CONNECT · PATCH · Random article Donate to Wikipedia were designed to be a reliable mechanism for websites to remember Header fields Wikimedia Shop stateful information (such as items in a shopping cart) or to record the Cookie · ETag · Location · HTTP referer · DNT user's browsing activity (including clicking particular buttons, logging in, · X-Forwarded-For · Interaction or recording which pages were visited by the user as far back as months Status codes or years ago). 301 Moved Permanently · 302 Found · Help 303 See Other · 403 Forbidden · About Wikipedia Although cookies cannot carry viruses, and cannot install malware on 404 Not Found · [2] Community portal the host computer, tracking cookies and especially third-party v · t · e · Recent changes tracking cookies are commonly used as ways to compile long-term Contact page records of individuals' browsing histories—a potential privacy concern that prompted European[3] and U.S.
    [Show full text]
  • HCI Lessons Using AJAX for a Page-Turning Web Application
    CHI 2011 • Session: Reading & Writing May 7–12, 2011 • Vancouver, BC, Canada Bells, Whistles, and Alarms: HCI Lessons Using AJAX for a Page-turning Web Application Juliet L. Hardesty Abstract User Interface Design Specialist This case study describes creating a version of METS Digital Library Program Navigator, a page-turning web application for multi- Indiana University part digital objects, using an AJAX library with user Herman B Wells Library, W501 interface components. The design for this version 1320 E. 10th Street created problems for customized user interactions and Bloomington, IN 47405 USA accessibility problems for users, including those using [email protected] assistive technologies and mobile devices. A review of the literature considers AJAX, accessibility, and universal usability and possible steps to take moving forward to correct these problems in METS Navigator. Keywords AJAX, accessibility, universal usability ACM Classification Keywords H.5.2. Information interfaces and presentation: User interfaces - user-centered design, standardization. General Terms Design, human factors, standardization Copyright is held by the author/owner(s). CHI 2011, May 7–12, 2011, Vancouver, BC, Canada. Introduction ACM 978-1-4503-0268-5/11/05. AJAX (Asynchronous JavaScript and XML) is a widely used method for developing Web 2.0 applications 827 CHI 2011 • Session: Reading & Writing May 7–12, 2011 • Vancouver, BC, Canada (called Rich Internet Applications, or RIA’s), both to incorporate the Semantic Web into Web 2.0 enhance certain features
    [Show full text]
  • Npm Packages As Ingredients: a Recipe-Based Approach
    npm Packages as Ingredients: a Recipe-based Approach Kyriakos C. Chatzidimitriou, Michail D. Papamichail, Themistoklis Diamantopoulos, Napoleon-Christos Oikonomou, and Andreas L. Symeonidis Electrical and Computer Engineering Dept., Aristotle University of Thessaloniki, Thessaloniki, Greece fkyrcha, mpapamic, thdiaman, [email protected], [email protected] Keywords: Dependency Networks, Software Reuse, JavaScript, npm, node. Abstract: The sharing and growth of open source software packages in the npm JavaScript (JS) ecosystem has been exponential, not only in numbers but also in terms of interconnectivity, to the extend that often the size of de- pendencies has become more than the size of the written code. This reuse-oriented paradigm, often attributed to the lack of a standard library in node and/or in the micropackaging culture of the ecosystem, yields interest- ing insights on the way developers build their packages. In this work we view the dependency network of the npm ecosystem from a “culinary” perspective. We assume that dependencies are the ingredients in a recipe, which corresponds to the produced software package. We employ network analysis and information retrieval techniques in order to capture the dependencies that tend to co-occur in the development of npm packages and identify the communities that have been evolved as the main drivers for npm’s exponential growth. 1 INTRODUCTION Given that dependencies and reusability have be- come very important in today’s software develop- The popularity of JS is constantly increasing, and ment process, npm registry has become a “must” along is increasing the popularity of frameworks for place for developers to share packages, defining code building server (e.g.
    [Show full text]
  • Nativescript Layout Widgets
    CS132 Lecture 37: Nobbles Lecture 21 Mobile Applications I 3/4/2020 1 Lecture 1: Course Introduction Web Application Architecture Front End HTTP Web Browser Database Back End Server Front End Web Server Mobile Platform 3/4/2020 2 CS132 Lecture 37: Nobbles Structure of a Web Application JavaScript Event Handling Events AJAX URLs HTML/CSS Back End HTML pages Browser 3/4/2020 3 CS132 Lecture 37: Nobbles Structure of a Mobile Application Native Event Handler Events AJAX Display Page Back End Handler Operating System 3/4/2020 4 CS132 Lecture 37: Nobbles Web and Mobile Differences HTML Front End JavaScript Native Event Handler Event Handler Operating Browser System URL Requests Page Handler 3/5/2020 5 CS132 Lecture 37: Nobbles Mobile Front Ends • Widget-Based o Hierarchy of widgets replaces HTML hierarchy o Text is in label widgets o Widgets exist for buttons, inputs, etc. ▪ Corresponding to HTML form elements o Layout is done using layout widgets ▪ These control how their contents are displayed • Widget Properties control formatting and display • Widgets can be created and nested directly • There is a language for defining widget hierarchies o Generally XML-based static description o Differs on the different platforms HTML Front End 3/5/2020 6 CS132 Lecture 37: Nobbles Mobile Event Handling • The actual code is event-based o Wait for event o Act on the event by starting action that yields new events • Events are similar to those of the browser o Based on user actions o Based on external events (timers, input ready, …) o But not quite the same
    [Show full text]
  • Download Ebook ^ Javascript: Ajax, Cross-Site Scripting, Couchdb
    W5CAMG0U1NWQ < PDF ^ JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... JavaScript: A jax, Cross-Site Scripting, Couch DB, W ebKit, JQuery, Dojo Toolkit, Bookmarklet, A ctionScript, V 8, SpiderMonkey, Qooxdoo, Ext JS Filesize: 7.09 MB Reviews It becomes an amazing book which i actually have at any time study. It is actually loaded with wisdom and knowledge You wont sense monotony at at any time of your respective time (that's what catalogues are for regarding should you request me). (Rosina Schowalter V) DISCLAIMER | DMCA EUQW6UIGSWMD > Kindle « JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... JAVASCRIPT: AJAX, CROSS-SITE SCRIPTING, COUCHDB, WEBKIT, JQUERY, DOJO TOOLKIT, BOOKMARKLET, ACTIONSCRIPT, V8, SPIDERMONKEY, QOOXDOO, EXT JS Books LLC, Wiki Series, 2011. Condition: New. This item is printed on demand for shipment within 3 working days. Read JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8, SpiderMonkey, Qooxdoo, Ext JS Online Download PDF JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8, SpiderMonkey, Qooxdoo, Ext JS R6UOTKQRMAXT « PDF \ JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... See Also A Smarter Way to Learn JavaScript: The New Approach That Uses Technology to Cut Your Effort in Half Createspace, United States, 2014. Paperback. Book Condition: New. 251 x 178 mm. Language: English . Brand New Book ***** Print on Demand *****.The ultimate learn-by-doing approachWritten for beginners, useful for experienced developers who want to... Read PDF » Why We Hate Us: American Discontent in the New Millennium Random House USA Inc, United States, 2009.
    [Show full text]
  • Sencha Web Application Lifecycle Management Platform
    Sencha Web Application Lifecycle Management Platform Businesses are under more pressure than ever to deliver Develop sophisticated web applications to their customers as quickly as possible. These applications are expected to be high quality, It’s critical for developers to reduce time to market and deliver visually compelling and run on multiple devices including desktops, high-quality products. We provide comprehensive frameworks tablets, and smartphones. Plus, many of these applications will that teams can use to build cross-platform web applications. We live for several years meaning that organizations have to consider offer both a JavaScript framework – Sencha Ext JS, and a Java the cost of maintaining and upgrading the application over the framework – Sencha GXT. long term. Sencha Ext JS For developers who want to use HTML5, CSS, and JavaScript, there The Sencha Mission is no better choice than Ext JS. More than 60% of the Fortune 100 Our mission is to help organizations deliver the right experience on rely on Ext JS and its comprehensive component library. the right screen at the right time. To deliver on this mission, we’ve It comes with everything a developer needs to create a created the Sencha Web Application Lifecycle Management Platform complex web application including UI component, data package, for designing, developing, deploying and managing cross-platform advanced charts, and application templates to help developers web applications. jumpstart their development efforts. Plus from a single code base, developers can create
    [Show full text]
  • Choosing the Right Javascript Framework for Your Next Web
    Choosing the Right JavaScript Framework for Your Next Web Application by Brandon Satrom © 2017 Progress. All Rights Reserved. All Rights © 2017 Progress. 2018 WHITEPAPER Table of Contents The Current State of Web Frameworks / 3 Tooling Considerations / 22 Evaluation Criteria / 5 UI & Component Libraries / 22 Ecosystem Considerations / 7 IDE & Tooling Support / 23 History & Longevity / 7 Companion & CLI Tools / 24 Popularity / 9 Enterprise Considerations / 26 Corporate Support / 11 Licensing / 26 Community & Ecosystem / 12 Support & Upgrade Paths / 27 Framework Considerations / 13 Security / 29 Getting Started Experience / 13 Talent Pool & Resources / 30 Skill Requirements / 15 Making a Choice / 33 Completeness of Offering / 17 Size & Performance / 18 Beyond the Browser Options / 21 © 2018 Progress. All Rights Reserved. All Rights © 2018 Progress. Progress / Kendo UI 2 The state of web application development has changed drastically in the past ten years. These changes have been spurred on by greater bandwidth for many, more powerful and feature-rich browsers. The result is a thriving web ecosystem with sites, apps and experiences that would have been hard to imagine a decade ago. And yet, for many developers, this ecosystem often feels like a bazaar, stuffed with libraries and frameworks that do anything and everything one could imagine. For every need there are a dozen options to choose from, and with new stalls (libraries) opening every day, it’s no wonder many of us pine for the days when starting a new project was as simple as dropping jQuery in a script tag. The Current State of Web Frameworks There’s no doubt that the web has grown in complexity, and our development tooling options have grown along with it.
    [Show full text]
  • Planning an Angular Application, from Tooling Choices During Development All the Way Through to Deployment and Performance Strategies
    Planning an Angular Application By Todd Motto © 2017 Progress. All Rights Reserved. All Rights © 2017 Progress. WHITEPAPER Table of Contents Project Management / 3 Accessibility, i18n and Environments / 5 Development Process Methodology / 6 Tooling and Development / 6 Testing Methodologies / 11 Codebase Distribution Strategies. / 12 Mobile and Desktop / 13 Style Guide, Architecture and State Management / 16 Backend API / 18 Performance Strategies / 19 © 2017 Progress. All Rights Reserved. All Rights © 2017 Progress. Progress / KendoUI 2 Planning an Angular (version 2 and above) application is something you may have already done, or will be soon attempting. This whitepaper documents a high-level outline of things to consider when planning an Angular application, from tooling choices during development all the way through to deployment and performance strategies. There’s certainly a lot more to it than meets the initial eye. Project Management Before you get started, you need to consider how you’re going to get the ball rolling - and keep it rolling. This usually starts with project management and discussing and agreeing upon particular toolchains to accomplish your next application. © 2017 Progress. All Rights Reserved. All Rights © 2017 Progress. Progress / KendoUI 3 Software Management Tools To manage the development of the front-end application, you’ll minimally need to select the Software management tools Examples following software management tools to manage code, assets, and team members’ tasks: Issues and feature tracker GitHub, BitBucket, JIRA Ensure that you and your team adopt the tools Version control system GitHub, BitBucket you choose, and frequently assess and improve Document/asset storage Slack, internal network storage, cloud your workflow.
    [Show full text]
  • Building Native Mobile Apps with Angular 2.0 and Nativescript
    Web and Mobile Code Sharing with Angular and NativeScript @sebawita Sebastian Witalec Developer Advocate @Progress @sebawita NativeScript is… an open source framework for building truly native mobile apps with JavaScript. Use web skills, like TypeScript, Angular, Vue and CSS, and get native UI and performance on iOS and Android. “The goal” 聾 Android iOS Web + = + = Architecture Angular Architecture Helping with code sharing Data Binding {{value}} Template < > Component [property] = “value” Property Metadat Event Native Binding Binding \ a (event) = ”handler” Compone Dom nt [(ng-model)] = { } “property” Renderer Renederer Compone Dom nt createElement Element { } setElementPropert y attachViewAfter Template < > invokeElementMeth od … Renderer NativeScript Renederer Compone Mobile nt createElement Element UI Layer { } setElementPropert y attachViewAfter Template < > invokeElementMeth od … Component export class MyComponent { name = 'Sebastian'; twitter = '@sebawita'; sayHelloTo(name) { alert(’Hi ' + name); } } Template <div> name: {{ name }} twitter: {{ twitter }} <button (click)="sayHelloTo('web')">Hello Web</button> </div> <StackLayout> <label [text]=“'name' + name”></label> <label [text]=“'twitter ' + twitter ”></label> <button (tap)="sayHelloTo('mobile')">Hello Mobile</button> </StackLayout > Dependency Injection Http Http call ≠ Http call HttpClientModule import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule, … ] NativeScriptHttpClientModule import { NativeScriptHttpClientModule } from
    [Show full text]