Tag: JavaScript

从webView到JavaScript的回调:在本机代码和html之间共享数据

eDetailing(以及其他使用html5显示内容的应用程序)是一个非常普遍的技术问题,您需要在本机iOS(或Android,Windows)代码和html演示文稿之间共享数据。 而且代码可以而且确实会变得凌乱。 当您尝试在UIWebView和JavaScript库之间共享数据时,最终将得到类似的结果。 这样做的问题很明显:您定义了业务逻辑,然后调用iOS方法,应用程序有时会调用其他方法作为回调。 您最终将状态存储在全球范围内,并试图猜测当前您在过程中的确切位置。 幸运的是,最近在JavaScript中出现了一些警告,这些问题都消失了: 承诺 可观察的 发电机功能 我们的目标是消除工作流中的发送方和回调之间的中断,并能够专注于业务逻辑,而不必担心在何处以及如何接收数据: 我只希望在调用本机函数时返回Promise 。 接回电话 首先,我们需要解决中断问题并在不离开发送方的情况下捕获回调。 为此,我们可以使用Observer模式 ,即ReactiveX。 我们观察何时调用回调: 回报承诺 现在,我们可以将所有这些内容简单地包装在Promise中,并在订阅者收到数据时对其进行解析 。 我还添加了一个超时,因此如果iOS代码出错,该代码将不会挂起。 另外,我们使用Bluebird,因为它比本地Promise快得多。 清洁业务逻辑代码 现在回到业务逻辑。 多亏了Promise, 我不必离开业务逻辑功能的范围 。 使用co(或简单的生成器函数)将有助于使代码更加清晰。 而且由于要调用的函数集有限,因此可以为与本机iOS代码进行的所有交互创建一个漂亮的,抽象的和通用的库。 这里有一个完整的例子。

如何用Jest编写单元测试:具有不同数据的相同测试套件

对于我们的React Native iOS应用,我们选择Jest进行测试。 原因很简单:它是由Facebook正式开发的(当时得到了全面支持和普遍使用。) 幸运的是,我发现Jest和Spock是我熟悉的另一个测试框架之间的相似之处。 两者都可以保持简明扼要的复制相同测试套件和不同数据的方式。 我们可以像这样在测试文件中写下数据表: 参考文献 入门·开玩笑 使用以下命令安装Jest:yarn add –dev jest npm install –save-dev jest让我们开始写一个测试…… jestjs.io 全球人物·开玩笑 在您的测试文件中,Jest将所有这些方法和对象放入全局环境中。 您不必要求…… jestjs.io 在Jest中组织测试 如果您还没有尝试过Jest,则应该这样做。 即使您不使用React。 它简直死了,并加载了… medium.com

介绍Create XP App

今天,我很高兴发布Create XP App。 Create XP App是ReactXP项目生成器,可让您使用单个代码库构建可在iOS,Windows,Android和Web上运行的应用程序。 单击此处查看回购。 尽管这是一个正在运行的项目,但它肯定仍在进行中,在接下来的几周/几个月中,我将获得反馈,进行改进和改进。 关于ReactXP的一些事情 建立在React Native之上 由Microsoft开放源代码,在新版本的Skype中使用 推荐使用TypeScript 要了解有关ReactXP的更多信息,请查看其回购和文档。 要安装和创建应用程序: 安装cli npm我-g create-xp-app 2.创建您的项目 create-xp-app新的MyAwesomeProject 在网络上运行 运行npm运行Web-watch(这将编译并监视您的TypeScript) npm运行网络观看 2.在浏览器中打开index.html 在iOS / Android / Windows上运行 运行npm run rn-watch npm run rn-watch 2.启动打包程序 npm start // or use haul 就像使用任何其他React Native项目一样,使用命令行,Xcode或Android Studio来构建和部署本机应用程序代码。 要了解更多信息,发表意见或提交问题,请查看此处的存储库。 我叫 Nader Dabit 。 我是 AWS Mobile 的开发人员倡导者, 负责 […]

重新创建本机iOS滚动和动量

我们在Unity中重新创建了iOS原生滚动条,并充满了动力。 我不会显示很多代码,但是我将与您分享Apple本身使用的原理和不可思议的数字。 我可以肯定,我不是唯一一个因在UX时代的2017年并不是每个卷轴都相同而感到高兴的人。 再次考虑,对所有内容进行标准化可能是一个错误的决定,尽管您可能会认为一种涡旋物理比另一种更好,但这实际上是一个见解的问题。 我老板的观点是,我们需要在iOS移动应用程序中实现iOS滚动物理的克隆。 您为什么要在移动应用中使用U nity ? —这就是我每天问自己的问题。 不管为什么,我们都解决了这个问题。 但是我们发现的结果会让您感到惊讶! 是的,我们用C#做到了这一点-但谁在乎,底层算法很重要,而不是语言。 不想听所有的戏吗? 只需滚动到底部。 NGUI和Unity UI 从一开始,我们就知道不可能在Asset Store上找到完成的产品/插件并仅仅实施它,但我也知道我们的老板是一位老派的高级程序员,并且不会拒绝。 因此,我们研究了NGUI和本机Unity UI滚动视图的物理特性。 这太可怕了。 虽然我们无法完全检查Unity UI的内部工作原理,但通过观察我们可以学到很多东西。 简而言之,开发人员似乎很着急,没有花时间对其他平台如何处理UI元素滚动进行适当的研究。 也许他们没有被告知要照顾? 毕竟,Unity UI不能用于完整的移动应用程序(在我们的例子中是社交网络)。 没有平台是相同的,但是到目前为止,我们知道Android和iOS在以下几件事上都达成共识: 在视口之外禁用或重用元素 建立动力并坚持到底 有一些弹簧机制或类似的实现 水平滚动和垂直滚动不应共存 让我们使用字体粗细:1700 对于第一个。 苹果和谷歌有一个很好的理由来解决所有使东西消失或失效的麻烦,即性能问题。 当您使用Unity UI滚动包含10个项目的游戏内菜单时,就纯fps性能而言,它表现良好。 但是,一旦您开始用各自的个人资料图片来表示从Facebook API渲染的所有1244个联系人,那么一切都会变得一团糟。 内存和CPU上升,而fps下降。 我发现iOS使用了一种很酷的技术-它会跟踪元素何时离开视口(为了大家,让我们称之为它)以及何时离开,将元素清空,填充新数据并附加到列表的底部。 因此,列表永远不会有超过12–13个元素一直在被重用。 我们认为此功能是必须的,但稍后会介绍更多。 当然,Unity UI不会这样做,正如我的同事Miloš告诉我的那样,NGUI似乎是一个半开发的系统,从未在任何地方使用过(呵呵,对吗?)。 至于它们的动力和春季选择,我们整天都在对它们进行自定义,但它们从未按预期工作。 将研究转移到网络上 在无奈之下,我在StackOverflow上发布了一个问题(里面有扰流板): 需要帮助剖析并基于PastryKit重新创建完美的滚动缓动 对于Web,我通常只使用本机滚动机制。 它们快速,可靠并且不涉及编码。 但是… stackoverflow.com 对于那些由于剧透而选择不读取S / […]

Swift Ruby Python用JavaScript编写

学习新语言的技巧 有一个鲜为人知的秘密,我们在民间/流行弦乐器世界中很少披露。 我们经常对人们说:“哦,您在寻找低音吉他手吗? 好吧,我只弹吉他,所以很抱歉,我无法为您提供帮助。”,因为这是一种摆脱演出的简便方法,因为演出收费不菲甚至根本没有。 这是一个谎言,但是我们大部分时间都不会这样做,因为询问的人通常对此并不了解,因此我们不必处理任何不必要的反弹。 但事实是,大多数音乐家可以而且确实可以演奏一种以上的乐器。 尽管有时这个模因很荒谬,但这确实是我在学习JavaScript和Ruby之后完成了Swift入门在线课程(在此处找到)时的感受。 老实说,我期望我以前从未见过的东西,并且一开始会相对丢失(通常是我的默认设置)。 男孩,当我发现自己错了时,我很兴奋。 该课程以所有语言课程的入门材料开始。 我在声明变量,编写字符串,学习数据类型以及每种编程语言的所有基础知识。 我没想到这里会有太多差异,因为您可以在此材料上进行的变化非常有限。 然后,我开始编写函数。 我不得不编写一个看起来像这样的问候函数: func sayHello(name:String){ print(“你好,\(名称)!”) } sayHello(名称: 名称) 看着它,我开始注意到一些相似之处。 我仅在这三行代码中就可以看到Ruby和JavaScript的并行性。 他们是: func sayHello(){}-> JavaScript函数语法 sayHello-> 像JavaScript一样的Camel Casing print()-> 也在Ruby中找到 sayHello(name: name)->调用JavaScript或Ruby之类的函数 对我来说,这是一个真正的突破性时刻。 我不再觉得自己是从第一个方格开始,而必须在初学者阶段逐步进行。 相反,我开始觉得自己处在某种加速的轨道上。 当我将该功能的所有内容分解为最小的部分时,我意识到唯一的区别是: func vs function-> 与JavaScript略有不同 (名称:字符串)-> 不同的参数语法 print(“ Hello,\(name)!”)->不同的插值语法 本质上,我只需要学习三件事就可以在Swift中编写基本功能。 谈论能够迅速起步! 我不但不发汗,反而乐于运用我以前的知识。 我感觉: 保持差异有序: 这是我遇到的最大困难,特别是在编写全栈应用程序或执行各种不同的代码挑战时。 尽管相似之处使学习语言更加容易,但有时,微小的差异被证明是主要障碍。 例如,在Ruby和Python中编写if语句之间的区别是: 红宝石: 如果arg […]

转换Ionic应用程序以吸引全球受众的5个步骤指南

支持您的移动应用程序的一种简单方法是支持他们的母语。 Apple强烈建议您为全球受众准备您的应用程序。 本教程介绍了如何翻译Ionic应用程序以支持其他语言。 我最近的“工作时间”更新(版本3.2)包括对其他5种语言的支持。 本教程通过5个简单步骤逐步介绍了如何更新应用程序: 翻译您的应用程序的内容 将Angular Translate模块添加到您的应用中 更新您的模板 更新您的控制器和服务 测试您的翻译 翻译您的应用程序的内容 在更改任何代码之前,我们需要翻译所有应用程序内容。 创建应用程序中所有文本的文本文档。 确保检查所有内容。 以下是一些注意事项: 每个模板的文字 来自每个控制器的文本 每个服务的文字 过滤器返回的文字 App Store说明 App Store关键字 除非您是多语种,否则您需要使用翻译服务将文本转换为您的首选语言。 我过去曾经使用过一个名为“我可以本地化”的网站。 您也可以在Fiverr上找到负担得起的翻译产品。 我建议找到具有翻译移动应用程序经验的翻译人员。 将Angular Translate模块添加到您的应用中 假设您使用Ionic Framework和AngularJS构建了应用程序,则应使用功能强大的翻译服务Angular Translate。 从他们的仓库中下载最新版本,解压缩文件,然后将angular-translate.min.js文件移动到项目js文件夹中。 然后只需将脚本嵌入到www/index.html文件中,如下所示: 确保将模块作为依赖项注入到您的应用程序中。 这是工作时间的节选: angular.module(‘hoursworked’, [‘pascalprecht.translate’]) 然后使用$translateProvider向应用程序介绍您的$translateProvider 。 以下是工作时间示例: $translateProvider.translations(‘en’, { start_label: “Start Time”, end_label: “End Time” }); $translateProvider.translations(‘es’, { start_label: “Principio”, […]

在Xcode中为React Native应用程序创建启动屏幕

如果您正在开发一个很棒的React Native应用程序,那么我想您应该完全按照自己的设计进行外观设计。 好吧,启动屏幕是用户首先看到的。 初看起来一定是最好的! 因此,让我们在Xcode中为您的React Native创建一个初始屏幕,这样您的用户就不会看到React Native在iOS默认显示的丑陋默认屏幕。 在Xcode中打开您的项目。 在左侧边栏上,单击文件夹图标。 打开下拉菜单 打开第一个文件夹 单击文件LaunchScreen.xib 有默认的启动屏幕。 在这里,您可以编辑文本,更改颜色,添加图像等等。 我不会教您如何创建漂亮的启动屏幕,但这是您发挥自己想象力的地方! 期待您将制作出所有出色的启动屏幕😀 如果您不喜欢我的文字和图像,还喜欢视频吗? 请查看这篇文章:http://reactcafe.com/how-to-remove-the-powered-by-react-native-message-in-ios/

世博分离的应用程序:从“ npm install”到商店:简介

首先,我将简要介绍一下自己,以便使所有事情都有意义,而我的动机也不会迷失。 是的,我是一名JavaScript开发人员,直到现在,它仍被认为是用于浏览器和Web的语言,但是最近随着Node(针对服务器端)和React Native(针对本机iOS和Android应用程序)的出现,javaScript生态系统正在像其他任何事物一样不断壮大。 因此,为了跟上步伐,最重要的是不失去工作,我跳入了React Native的生活方式。 在浏览文档并修改CRNA(create-react-native-app)时,我偶然发现了Expo。 世博会的好人已经烧掉了午夜的油,这样我们就不必再想出一种了不起的产品,它使您可以更快地构建应用程序。 通过完全消除本机元素,他们简化了从在设备上进行测试到发布应用程序的整个构建过程。 他们还提供一些免费服务,例如Push Server,托管JavaScript捆绑包和一些React组件,这些服务使您的生活变得更加轻松,尤其是当您访问设备存储或捕获用户位置时。 使用Expo很棒,但是有时候您需要在应用程序中集成一些东西,而Expo到目前为止还不支持这些东西,并且您需要自己修改本机代码。 在这种情况下,expo为您提供了“ 分离 ”应用程序的选项,这在外行的术语中基本上意味着 “将本机代码公开给开发人员,现在进行管理是我们的责任,而不是他们的责任”。 通过博览会分离的好处是您仍然可以 在您的服务器上托管Javascript Bundle的支持,使您可以进行OTA更新。 分离后,他们会为您提供一个Expo Kit,其中包含所有JavaScript软件包,可以使开发更加容易。 坏事 您需要自己在App Store和Play Store上发布构建。 他们取消了对推送通知的支持,现在就可以将推送集成到您的应用程序中了。 在很多情况下,他们只是拒绝提供支持,指出它超出了他们的“博览会领域”。 但最重要的是,成为问题的是管理构建过程,即使用expo工具包管理本机代码,如果您有多个环境,则将变得一团糟。 本系列文章的重点是帮助您解决相同的问题,使您的生活更轻松,并且特别是如果您来自Web开发背景,则可以简化本机代码的处理。 它将包括 为不同的环境(生产,开发,UAT,QA)提供不同的服务包。 管理应用程序构建以使用定义的环境包。 管理特定于环境的变量,例如API URL。 最重要的是,通过自动化一些流程并避免人为错误,从而使构建过程变得万无一失,尤其是在团队合作中。 注意:这些是我使用的步骤,它对我有用。 对于其他人,它可能有所不同。 这个想法是给一些方向。 此外,本系列文章也不是用于编码expo或本机反应的教程。 这将有助于: 对本机构建过程有新反应的人 人们不了解本机代码并发现它令人生畏 人们已经知道Expo和React native 他们已经弄乱了头发,弄清楚了这个烂摊子。 :p 该系列的先决条件: 应该了解React Native和Expo 应该了解脱离世博会的概念 我很想听听您对此的看法。 另外,如果您有构建过程,则可以在“响应”部分中共享它们。 让我们将此变得有趣而有益,以便每个人在这里都学到一些东西。 继续阅读! 继续编码! 更新:本系列的第二部分已经结束。 […]

模型视图控制器的起源

MVC(模型视图控制器)是一种用于在电子设备上实现用户界面的软件模式。 根据其架构师Trygve Reenskaug的说法,“ MVC的创建是为了解决使用户可以从多个角度查看其信息的一般问题的解决方案。” Trygve在施乐Palo Alto研究实验室担任客座科学家时就想到了MVC。 PARC),在1978年夏季至1979年之间。在PARC期间,他专注于支持LRG(学习研究小组),该小组正在开发DynaBook。 DynaBook是对现在称为平板电脑的早期概念。 它的创建者设想了一种通用工具,可以弥合用户和与她相关的信息之间的鸿沟。 早期的概念是考虑到儿童的,因此DynaBook可以用作所有年龄段儿童的学习计算机。 因此,它必须易于使用,并且必须直观。 正如创作者所描述的:“ 用户就是沙皇; LRG所做的一切都是为了支持他。” 在这种背景下,创建了MVC,将其作为一种新型个人计算机的支持软件体系结构。 一台将可用性放在首位而不影响功能的计算机。 这种想法在MVC的原始理论化中显而易见。 正如Trygve所说的那样, “ MVC的基本目的是弥合人类用户的心理模型与计算机中存在的数字模型之间的鸿沟。 理想的MVC解决方案支持用户直接查看和操作域信息的错觉。 如果用户需要在不同的上下文中和/或从不同的角度同时看到相同的模型元素,则该结构很有用。” MVC的第一个实现是由LRG集团以一种称为Smalltalk的语言完成的。 smalltalk是第一种真正的面向对象语言。 如今,MVC已成为桌面GUI,Web应用程序甚至移动应用程序的首选架构模式。 它也已成为Web最受欢迎的Web框架的选择模式。

Swift不应该成为iOS的未来

Swift试图做到两件事:一种针对高速和内存效率量身定制的语言,以及一种提供高级抽象的语言。 但是大多数应用程序不需要达到很高的性能水平。 滑动后,代码将在页面之间转换,然后CPU闲置坐在那里,直到用户启动其他操作为止。 大多数用户界面代码可以忍受100ms,但是Swift的目标是1ms。 关于我们的应用程序,最慢的事情通常是数据I / O,而这是语言甚至无法解决的! 在某些情况下,确实需要某些代码真正快。 它分为两大类:游戏和数据算法。 我不是在这里谈论游戏,那是完全不同的野兽。 但是对于算法,它们可以与其余代码库分离和隔离。 其余代码不需要太快。 更重要的是它简单,容易并且具有高级抽象。 这就是为什么我认为Apple明智的做法是使JavaScript成为面向iOS平台的一流语言。 如果要保持类型安全,则可以集成TypeScript。 VS Code中已经有非常好的IDE支持,所有这些都是开源的,因此Apple可以将其集成到Xcode中。 (我完全知道建议苹果使用微软制造的东西具有讽刺意味,但这并不会自动使它成为一个坏主意!他们应该使用正确的工具来完成这项工作。) 这样,对于需要关注性能的狭窄区域,它们仍然可以用C编写,Apple甚至可以创建一个小桥梁,在该桥梁中可以从JavaScript自动调用C代码,并自动转换类型。 他们已经使用Swift做到了这一点,肯定可以使用JavaScript再次做到这一点! 许多用户都在使用许多流行的React Native应用程序。 尽管它们确实比本地应用程序慢,但这也意味着如果苹果自己创建该层的自己的版本并将其作为一种幸运的本地开发方式,那么他们将有更多的机会对其进行优化。 这将使Apple过渡到更现代的视图处理方法有多容易。 确实,ViewController,情节提要和自动布局朝着正确的方向发展,但它不应成为最终的目的地。 React,React Native和Flutter都向我们展示了开发人员渴望一种更简单,更直观的方式来构建移动应用程序。 现在,苹果需要采取行动,采取主动行动,否则就有落伍的危险。