8 ms·
Framework 7 – Building native iOS apps in HTML5
- timmm 13y agoThis is a webview app not a native app.
- oakesm9 13y agoDon't frameworks like this which try and emulate one platform very well get rid of the only advantage of building an app using web technologies, that it's cross platform. Apps using this will feel really out of place on Android and Windows Phone, and you'll end up spending lots of time porting the web app to those platforms if you want to support them properly.
- chrisdevereux 13y agoAnd simultaneously, you loose the main benefit of a native app, which is being able to draw on the work of all the really smart people who work on the native frameworks. I guess if you're doing something that browser technologies are better suited for than native code, it might be a more pleasant developer experience. It might be fun to build a meteor app with something like this, for example.
- tfinniga 13y ago> the only advantage of building an app using web technologies, that it's cross platform There are other advantages of building an app using web technologies. Maybe you want to link to a store that doesn't pay Apple 30%. Maybe you want to control your own updates. Etc.
- CmonDev 13y ago> Maybe you want to link to a store that doesn't pay Apple 30% Isn't this explicitly forbidden on AppStore by Apple regardless of technology? > Maybe you want to control your own updates. This is what some games do, you don't need HTML/JS for that.
- tfinniga 12y agoRight, that's an app store rule. However, if you've got an HTML 5 app you don't need to install it through the app store. For example, forecast.io. I'm not sure what you're saying about games controlling their own updates. What I was talking about specifically is that a web app can update at any time, without the vetting process required of apps in the app store. My understanding was that app store apps couldn't download and execute new code.
- marknutter 13y agoNot necessarily. You could share the bulk of your code between platforms and use whatever mobile ui framework you want for each platform. They're just window dressing, after all. Compare this to native iOS and Android development, where very little if any of your code can be shared.
- apierre 13y agoThe title should say, mimics native iOS UI in the browser. Nice job though.
- jimejim 13y agoThis. I like the look of it and it's still useful, but we need to stop abusing the word "native." Let's be clear that this is just an html framework that looks like a native app. It's still a website. This is not the same thing as Phonegap, for example, which lets you build a native app you could install from the app store. Again, still useful if you want your mobile website to look native, but not the same thing.
- geoffroy 13y agoreally cool I think !
- maxehmookau 13y agoYeah, this is shiny and cool. But not native.
- kosso 13y agoTrue. This is different to how Appcelerator Titanium does it - which does build native apps with native components, despite the code to build the apps being written in JavaScript.
- jbverschoor 13y agoVery impressive! One of the best mimics so far. Performance is good and very lightweight. Might use this for prototyping an app.
- deleted 13y ago[deleted]
- thewarrior 13y agoI played with this just now on an IPod Touch and must say that it is incredibly smooth. It could easily be mistaken for a native app.
- WillKirkby 13y agoJust tried it on Android (Chrome, Nexus 5, 4.4.2). Very smooth, but the sideways page-to-page transition was incredibly stuttery. It also doesn't handle the "back" button the way I'd expect from something like this.
- madeofpalk 13y agoI'm very impressed with the page transitions. They're pretty spot on. Havent got the toggles right though. The stretched out dot is not it moving into another position, it's the result of you tapping it. If you tap and hold, the dot shoud expand out.
- my3681 13y agoI'm not knocking this or any particular xxxx-to-mobile platform, but as a native iOS and android developer, I would highly recommend just learning the native languages and frameworks. First, you have the absolute most control you will ever have over your application. This may not be true when a particular tool becomes popular, say at the release of a new tool, but this definitely shows up as time progresses. Who knows what tools will keep up with the native frameworks terms of functionality? Another reason that is more qualitative, is that you come into contact different design styles, code styles and paradigms. Objective-C, for instance, is a tricky beast sometimes, but it is an interesting language with a lot to learn both good and bad. The new things you learn will most definitely carry over into your web programming! The third reason to code natively, and I cannot stress this enough, is third-party library support. Maven and cocoa pods may dependency management much better on the mobile platforms, and using a third-party tool will most likely render all those advancements useless. There are some amazing libraries for both platforms that you definitely don't want to miss. They were reduce the amount of time you spend coding and improve your baseline quality.
- skrowl 13y agoWith Xamarian being acquired by Microsoft, I'm really hoping to NOT have to learn native android / ios / windows phone development. I don't have time for that, and I'm already an expert in C#.
- jawngee 13y agoThe language isn't the issue, the frameworks and libraries are. You're going to have to spend your valuable expert time sorting those out too. That's the bulk of it. If your truly an expert at c# then learning objective-c isn't much of a challenge. At least learning the amount you need to build apps.
- yulaow 13y agoThe advantage of using a single language is that, for each single app in all the three store, you have to change a single codebase and not to make 3 different changes in 3 different codebases just because each of them require its own language (and then its own specific libraries). So you have surely to spend the time to sort the libraries, but it is a one-time problem. After it, you can just use them without problem in all your projects and you really can focus on your idea Put all the code in a good ui/codebehind separation framework like mvvm, and you are happier than ever.
- pjmlp 13y agoNative apps in HTML5 is an oxymoron.
- romanovcode 13y agoIt's important to add words like "native" to main product description tho. Adds credibility. It's ok that this is completely NOT native.
- CmonDev 13y agoThe only native apps in HTML5 are probably some of those Win 8 apps. If you think about it HTML5 is just a quirky version of XAML and the latter is supported in Win8 very well. Maybe OS itself should give a choice of layout engine.
- forgotAgain 13y agoThe limit we've run into with iOS is not getting a good looking UI. Rather it's the performance of Javascript in Safari. We have a fairly large one page webapp that looks great on iOS however the performance is an order of magnitude slower on an iPad than Chrome on an old laptop.
- Touche 13y agoTried React?
- stevekinney 13y agoMy understanding is that only Safari gets access to Nitro (Nitro : Apple :: V8 : Google). Web Views inside native apps don't get access to Nitro. Even web apps that you save to your home screen don't get access to the faster rendering engine. This is apparently for security reasons. I think it's one of the biggest barriers to web apps being competitive on iOS. (The other is that there really isn't a good installation story.)
- Touche 13y agoThey made poor initial design decisions which effectively put a speed limit on JavaScript apps. Currently they are not motivated to do the probably very difficult work it would take to fix the problem, that's why it's so important that the Chrome team gets its shit together and makes the speed of Chrome Android awesome (which, to their credit, is a goal for this year). Unfortunately the lack of competition on mobile makes innovation very slow, there's no motivation to make rapid improvements.
- x1024 13y agoIt's really easy to "fix the problem". There have been fixes on Jailbroken devices for years.
- maxmcd 13y agoI'm not going to make an assumptions about how hard it is for apple to solve the problem, but I'm sure people writing solutions for jailbroken devices have a much greater degree of flexibility when it comes to making changes to the OS.
- deleted 13y ago[deleted]
- ing33k 13y agonice, but where are the docs ?
- danbruc 13y agoCongratulation! You have managed to create a web page where even links no longer work. Okay, that is a bit of an overstatement - open in new window, download and probably also the social media links do work.
- jameshk 13y agoI would say best used as a web app that one can use along side a native app IE Gmail, which has an ok mobile web app and a good native app.
- jonashickisch 13y agoCorrection, "Native look & feel". But well made!
- kosso 13y agoNice work. Suggestion: Add the new iOS7.1 "minimal-ui" key to the viewport tag. It makes the top bar a lot smaller and makes it fullscreen in landscape mode. Much nicer for an 'app-like' experience. <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes, minimal-ui" />
- lukifer 13y agominimal-ui is a god-send. Without it, bottom-screen tab bars in web apps are effectively unusable.
- noinput 13y agoVery impressive. As someone who uses Appcelerator a lot, this makes me rethink the ability to prototype and app quick and wrap it with Phonegap, or a similar strategy. Colors, spacing, swipe translations are all very solid. While a majority of everyone else here complains about pixels and the right words to use, I'd like to congratulate you on this.
- joshmlewis 13y agoI wanted to enjoy this but I opened it on my phone and was immediately cursed with problems. - When I scrolled the list items where my thumb was scrolling started lighting up - When I clicked a button nothing happened, I had to click a few times repeatedly before it changed screens and even then it didn't feel like I clicked - When I clicked back nothing happened, and after a couple more tries I saw it was working and then changed the page. That might could be solved with something like fastclick. I would love a tool like this but it has to be damn near perfect for me to be able to consider it with my team. EDIT: After playing with it a little more I found it gets a little better. The big issue is lag and fluidness for me. It's got to be very responsive to touch and movements and not have any lag or choppiness.
- EC1 13y agoThis is honestly so pointless and bad for the community, further dividing up mobile technology. Why not just improve on something that already exists like jQM? "Building native iOS apps in HTML5". You're building them in HTML5, to look like iOS7, not exactly native now is it? This is the same thing as making a theme for jQuery Mobile. I clicked on this hoping to download something that converts my HTML5 app to native code, but then I clicked this, and immediately had severe performance issues on iOS7, iPhone 5S. I really hope this does not take off, and if it does, I hope they fix the performance ASAP. Not even REMOTELY close to native performance, look, or feel.
- tluyben2 13y agoDid you ever try jQM? My god. I applaud any efforts to move away from it.
- EC1 13y agoJQM is so unbelievably terrible. Been working with it for the past year.
- tluyben2 13y agoI'm so sorry... I have seriously not often in my 30 years of being a coder seen something so promising turn out so bad. It doesn't even get the 'hello world' right. Why have you been working for it for the past year?
- haar 13y agoWas anyone else disappointed when they opened it on their iPhone and it rendered the same page?
- Dogamondo 13y agoI've had quite a lot of luck developing HTML/JS apps in Sencha Touch (very basic CRUD apps of course). Really noticed a speed improvement running the latest release on an iPhone 5S. Not sure how much room there really is for HTML/JS ports at this stage. Titanum was a let down for me. Am keen to try Xamarin next. Or just go native? Thoughts?...
- jfahrenkrug 13y agoThey did a nice job on this framework, but I think it is a fundamentally wrong approach. Here is why: http://www.springenwerk.com/2011/09/thoughts-on-mobile-ui-design.html http://www.springenwerk.com/2011/09/thoughts-on-mobile-ui-de... Or, if you prefer a video: http://vimeo.com/32256530 http://vimeo.com/32256530
- redindian75 13y agoWow what a tough crowd. So many off topic discussions. The framework is buttery smooth, and very well done. Kudos to the dev! I have never seen any html5 framework (like ionic, jqm, wink etc) nail swipe to delete row so acurately Awesome job!
- fvt 13y agoI'm baffled that a technology stack (HTML, JS) that every single web developer think is broken (but still have to deal with) is being considered for iOS development, and being promoted as an easy way to develop native apps. This is where I think RubyMotion offered the best of both worlds: native APIs and Ruby's flexibility (even if Objective-C is really not that bad or hard to learn).
- beagle90 13y agoWeb Dev here. I don't think the stack is broken.
- fvt 13y agoPositioning elements, fighting to implement the support of multiples screen resolutions, dealing with JS quarks, etc. All those topics are mastered in most native frameworks and clearly a hot topic in web dev. Maybe broken is a little bit exaggerated, but very well deserved IMHO. After several years in web dev _and_ mobile dev, I can safely say that even in a couple of years, native toolchains won't be relegated to a marginal role and remain the only efficient way of developing native apps.
- zschoche 13y agoThere is nothing native. Go home and read a books.
- krrishd 13y agoI remember that you built this in the Static Showdown hackathon! Congratulations, and it looks like a really promising project :)
- jfahrenkrug 13y agoCross-platform UI is a bad idea on the desktop. Cross-platform UI also is a bad idea on mobile. We need to learn from the past. Cross-platform UI is a conceptual mistake. An app that has an icon on the home screen is perceived by the user as "an app", no matter if it actually launches the browser without the toolbar, if it is a web app wrapped in a PhoneGap shell of if it is a native app. To the user, it's an app. It has an icon, so it's an app. The rest are implementation details that the user doesn't (and shouldn't) care about. So if the user perceives it to be a native app like all the other apps, it has to behave like one. Otherwise the user will be disappointed. Web apps that mimic native apps simply don't behave exactly like native apps: Imitating native UI with web technologies on a mobile device will only disappoint.
- dmix 13y agoAs someone who spent years building "HTML5" JS mobile apps and then recently spending the time to learn native languages, I 100% agree. There is no way to match the performance and consistency of native with a cross-platform clone. It will always be a half-baked solution. That being said this only applies to apps. A ton of apps shouldn't be apps, they should be well-optimized websites. For ex. content sites. Side Note: Learning Objective-c and Android java dev isn't nearly as bad as I thought it would be. It takes less time to learn and build native instead of trying to hammer Javascript into a hole it doesnt fit into, and spending hours attempting to optimize it's performance to no end.
- jfahrenkrug 13y agoI fully agree. As stated in my article http://www.springenwerk.com/2011/09/thoughts-on-mobile-ui-design.html http://www.springenwerk.com/2011/09/thoughts-on-mobile-ui-de... I think that the web is the one place where cross-platform UI actually works. Don't destroy it by using that freedom to mimic a native UI. Plus, in quite a few cases a great mobile website would be a much better solution than an app anyway.
- Kiro 13y ago> Learning Objective-c and Android java dev isn't nearly as bad as I thought it would be Where did you start? As a web developer Java and Objective-C seem really complicated and require so much code for the simplest things.
- joeblau 13y agoThe problem with HTML5 is and always will be performance, not because of HTML5 but because of the platform it sits on. The DOM simply can not perform with the efficiency of native applications. I'm more hopeful for companies like famo.us that have basically subverted the DOM renderer for their own Unity-style game engine. You can see demos of their projects at http://demo.famo.us/ http://demo.famo.us/. Running those on your phone will give you an idea of what a truly native web experience should feel like. All of these attempts to make a web page run fast on the phone are all bound by one single performance constraint; Document Object Model.
- SimeVidas 13y agoSo the "Download" button is a regular link to the GitHub repo. Ugh, not a smart move. Ok, so the technical details are: * JS file (minimized): 33k * CSS file (minimized): 62k